How to Dockerize Your Next.js App: A Step-by-Step Guide

In this blog post, I'll show you how to Dockerize a Next.js app using Docker and Docker Compose. We'll cover creating a Dockerfile, setting up a .dockerignore file, and configuring compose.yml to streamline development and deployment. This guide will help you containerize your Next.js app efficiently for a consistent environment across all stages.

---

Step 1: Create Your Next.js App

Start by creating a new Next.js application using the following command:

npx create-next-app@latest "your_app_name"

This will generate a Next.js project with the default setup.

---

Step 2: Initialize Docker

Once your Next.js app is set up, navigate to the project folder and run the following command to initialize Docker:

docker init

This command will generate essential Docker configuration files such as Dockerfile, compose.yaml, .dockerignore and README.Docker.md providing a solid starting point for containerizing your application.

---

After these steps, your project should look like this:

---

Step 3: Configure Next.js for Standalone Output

To optimize the Next.js app for production and make it easier to run in a Docker container, update the next.config.ts file by adding the following configuration:

import type { NextConfig } from 'next'


const nextConfig: NextConfig = {
  output: 'standalone',
}

export default nextConfig

This setting allows Next.js to generate a self-contained build, making deployment simpler with fewer dependencies.

---

Step 4: Configure the Dockerfile

Open the Dockerfile in the root of your project and replace its content with the following setup or your setup:

FROM node:20-alpine

WORKDIR /app
COPY package*.json /.
RUN npm install

COPY . .
EXPOSE 3000
CMD npm run dev

This Dockerfile uses a single-stage build process, simplifying the setup while still Dockerizing the Next.js application for development and production use.

---

Step 5: Configure compose.yaml

Update the docker-compose.yml file in the root of your project with the following content:

services:
  app:
    build:
      context: .
    image: host
    ports:
      - '3000:3000'
    environment:
      NODE_ENV: development

This configuration defines a service called app, which:

• Builds the image from the current directory (context: .).
• Tags the image as host.
• Maps port 3000 on your local machine to port 3000 inside the container.
• Sets the environment variable NODE_ENV to development.

Now, you can run your app with Docker Compose using the command:

docker-compose up 

---

Conclusion
In this guide, we have covered the steps to Dockerize a Next.js application, making it easier to manage and deploy consistently across different environments. By following these steps:

• Created a Next.js app using create-next-app.
• Initialized Docker to generate the necessary configuration files.
• Configured Next.js for a standalone build by modifying next.config.ts.
• Set up a simple Dockerfile to build and run the Next.js app.
• Configured docker-compose.yml to streamline building and running the application with ease.

With Docker and Docker Compose, you can now easily deploy your Next.js application in a controlled and reproducible environment. This approach simplifies development, testing, and production setups, ensuring that your application works the same across different machines and stages of deployment.