DEV Community

Cover image for How to Dockerize Your Next.js App: A Step-by-Step Guide
Burak Boduroğlu
Burak Boduroğlu

Posted on • Edited on

4 1 1 1 1

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:

Folder Structure


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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

Result


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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay