Enhance your Next.js website with seamless Docker Compose integration, standalone output generation, and lightning-fast hot reload capabilities using the Next.js with Docker Compose solution. Easily incorporate new open source repositories into your personal website, ensuring your content stays up-to-date and your development process remains efficient.

NextJS With Docker Compose & Hot Reload

This example contains everything needed to get a Next.js development and production environment up and running with Docker Compose.

Benefits of Docker Compose

Develop locally without Node.js or TypeScript installed ✨
Easy to run, consistent development environment across macOS, Windows, and Linux teams
Run multiple Next.js apps, databases, and other microservices in a single deployment
Multistage builds combined with Output Standalone outputs up to 85% smaller apps (Approximately 110 MB compared to 1 GB with create-next-app)
Easy configuration with YAML files

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-docker-compose with-docker-compose-app

yarn create next-app --example with-docker-compose with-docker-compose-app

pnpm create next-app --example with-docker-compose with-docker-compose-app

Optionally, after the installation is complete:

Run cd next-app, then run npm install or yarn install or pnpm install to generate a lockfile.

It is recommended to commit a lockfile to version control. Although the example will work without one, build errors are more likely to occur when using the latest version of all dependencies. This way, we're always using a known good configuration to develop and run in production.

Prerequisites

Install Docker Desktop for Mac, Windows, or Linux. Docker Desktop includes Docker Compose as part of the installation.

Development

First, run the development server:

# Create a network, which allows containers to communicate
# with each other, by using their container name as a hostname
docker network create my_network
 
# Build dev
docker compose -f docker-compose.dev.yml build
 
# Up dev
docker compose -f docker-compose.dev.yml up

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Production

Multistage builds are highly recommended in production. Combined with the Next Output Standalone feature, only node_modules files required for production are copied into the final Docker image.

First, run the production server (Final image approximately 110 MB).

# Create a network, which allows containers to communicate
# with each other, by using their container name as a hostname
docker network create my_network
 
# Build prod
docker compose -f docker-compose.prod.yml build
 
# Up prod in detached mode
docker compose -f docker-compose.prod.yml up -d

Useful commands

# Stop all running containers
docker kill $(docker ps -aq) && docker rm $(docker ps -aq)
 
# Free space
docker system prune -af --volumes