Deploy Next.js app with Docker and Docker Compose - Tutorial

Next.js is a powerful React framework for building fast and user-friendly web applications. One of the key advantages of Next.js is its ability to support server-side rendering, static site generation, and API routes, making it a versatile choice for developers.

To ensure that your Next.js app is portable, scalable, and easy to deploy across different environments, you can containerize it using Docker. This tutorial will guide you through the process of packaging a Next.js app with Docker and Docker Compose.

Set Up Your Next.js Application

If you haven’t already set up your Next.js application, you can create a new one using the following commands:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

This will create a new Next.js application in the my-nextjs-app directory.

Create a Dockerfile

In the root directory of your Next.js application (my-nextjs-app), create a Dockerfile to define the Docker image. Here’s a sample Dockerfile:

# Use an official Node.js runtime as a parent image
FROM node:18-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Next.js app
RUN npm run build

# Expose the port that the Next.js app will run on
EXPOSE 3000

# Start the Next.js app
CMD ["npm", "start"]

Create a docker-compose.yml File

In the root directory of your project, create a docker-compose.yml file to define the services required to run your Next.js application. Here’s an example:

version: '3.7'

services:
  nextjs-app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: nextjs_app
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    volumes:
      - .:/app
      - /app/node_modules

Build and Run the Docker Containers

With your Dockerfile and docker-compose.yml in place, you can now build and run your Next.js app using Docker Compose. Run the following command to build the Docker image and start the container:

docker-compose up --build -d

This command will build the Docker image for your Next.js app and start it in a detached mode. The app will be accessible at http://localhost:3000.

Access Your Next.js Application

Once the container is up and running, you can access your Next.js application by navigating to http://localhost:3000 in your web browser.

Managing the Containers

Here are some useful Docker Compose commands to manage your containers:

Rebuild and restart the containers:

docker-compose up --build -d

View logs:

docker-compose logs -f

Stop the containers:

docker-compose down

Optimizing the Dockerfile (Optional)

To further optimize your Dockerfile for production, you can use a multi-stage build to minimize the image size. Here’s an example of an optimized Dockerfile:

# Stage 1: Build the app
FROM node:18-alpine AS builder

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

# Stage 2: Serve the app
FROM node:18-alpine

WORKDIR /app

COPY --from=builder /app ./
RUN npm install --production

EXPOSE 3000

CMD ["npm", "start"]

This multi-stage Dockerfile first builds the Next.js app and then copies the build files into a new, minimal image, reducing the final image size.

Conclusion

By following this tutorial, you’ve successfully packed your Next.js application using Docker and Docker Compose. This setup ensures that your application is easy to deploy, scalable, and consistent across different environments.

Whether you’re deploying to a cloud provider, a VPS, or running it locally, Docker makes managing and deploying your Next.js app a seamless experience.