How to Dockerize Next Js App

Docker is one of the most useful tools that will ease your app development journey. Docker allows developers to containerize their app and all of its dependencies into a single container, so it can be deployed easily on any environment that runs Docker.

Prerequisites

This tutorial will teach you how to dockerize a Next Js app, I will assume that you already have:

• A Next Js project.
• Besides this, please make sure that you have installed Node Js and Docker daemon on your machine
• Yarn installed on your machine

Step 1 — Create Dockerfile

First, you need to create a new file on your project root, this file will be called “Dockerfile” without any extension.

Sample project structure

Next, open the file and insert this Docker command for the Dockerfile file.

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# If using npm comment out above and use below instead
# RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000
# set hostname to localhost
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]

These commands will build your app, put all dependencies, and run your app inside an isolated container with an exposed port to access it.

But, by using this file only, it will use a long command to run. Instead, we can utilize Docker to compose to make it easier to build.

Step 2 — Using Docker Compose

Instead of using only Dockerfile, we can use Docker Compose. To use it, first, we need to create another new file, this file will be called ‘docker-compose.yml’.

Create a new file

Inside this file, we can put this docker-compose commands:

version: '3.9'
services:
  web:
    build:
      context: ./
      target: runner
    image: example-image
    volumes:
      - .:/app
    command: npm run dev
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: development
    platform: linux/amd64

Now, you are ready to build and run the app using docker-compose.

Step 3 — Containerize Using Docker Compose

After you have set up the docker-compose YML file, you can utilize this command to build the app into an image, that later can you push into Docker registry such as Docker Hub or any custom registry.

docker compose build

Conclusion

In this tutorial, you have learned how to containerize a Next Js app, starting from creating the Dockerfile and using Docker Compose to ease the build process.

Thank you and happy coding!