Next.js Docker Images

Docker is a set of platform-as-a-service products that create isolated virtualized environments for building, deploying, and testing applications with ease. In this tutorial, we will learn to create an image of a Next.js application. Next.js is a React framework that helps in building server-side rendering web applications.

What Is Docker Image?

In order to run these applications, we first need to create an image of the current application state. An image can be sometimes referred to as a snapshot of our project. Images are read-only in nature and consist of file that contains the source code, libraries, dependencies, tools, and other files needed for an application to run.

A Docker image is a read-only template that contains a set of instructions for creating a container that can run on the Docker platform.

To use a programming analogy, if an image is a class, then a container is an instance of a class. Containers are the reason why you’re using Docker. It is a lightweight and portable environment to run our applications.

Containers are running instances of Docker images. Containers run the actual applications.

Steps to initialize NextJs Docker Images: Follow the below steps to initialize the NextJs Docker Images:

Step 1: Initializing NextJs project

Go to the directory where you want to initialize your project and use npx to download all required files.

$ npx create-next-app 

 

Step 2: Open The Application On your code editor. I am using vs code and the command to open my NextJs project on it will be:

$ cd my-app && code .

Step 3: Create a Dockerfile in the root directory of your Next.js application.

A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. In this step, we will create two dockerfiles.

• Dockerfile: Dockerfile for production, alternatively you can name it prod.Dockerfile
• dev.Dockerfile: Dockerfile for development

Production means when the application is deployed for use and development means when the application is under development.

 

This is the Dockerfile used in the production of the application:

# Dockerfile for production
# Install dependencies only when needed
FROM node:16-alpine AS deps

# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926
ef50a31506c3#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; \
else echo “Lockfile not found.” && exit 1; \
fi

# Rebuild the source code only when needed
FROM node:16-alpine 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 node:16-alpine 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

# 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

CMD [“node”, “server.js”]

You can create a file named “Dockerfile” in the root directory of your project and paste these instructions into it.

This is the Dockerfile used in the development of your application:

# dev.Dockerfile for development

FROM node:18-alpine

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; \
    else echo "Lockfile not found." && exit 1; \
    fi

COPY . .

CMD yarn dev

Step 4: Altering next.config.js. To add support for Docker to an existing project, just copy the Dockerfile into the root of the project and add the following to the next.config.js file:

// next.config.js
module.exports = {
    // ... rest of the configuration.
      output: 'standalone',
}

Step 5: Build The Dockerfile and dev.Dockerfile

$ docker build -t nextjs-docker .

$ docker build -t nextjs-docker-dev -f dev.Dockerfile .

It usually takes time to build the Image for the first time.

 

 

Step 6: Run your application. Based on the tags you gave to your Dockerfiles you can now run them with the docker run command.

# For production
$ docker run -p 3000:3000 nextjs-docker

# For development, files wont be synced until step 8
$ docker run -p 3000:3000 nextjs-docker-dev

The -p flag exposes the container’s port to services outside docker.

 

 

 

Step 7: Verify if our application is running.

 

Step 8: Allow file change detection:

Everything looks great so far, but there is one small problem that we did not solve. As we know Images are read-only and any file change made after the files have been built will not reflect on the localhost. For this, we have to use a bind mount. With bind mounts, we control the exact mount point on the host. We can use this to persist data, but it’s often used to provide additional data into containers. 

$ docker run -p 3000:3000 -v $(pwd):/app  nextjs-docker-dev

-v $(pwd):/app specifies the mount point of the application so that file changes can be detected.

 

Try making some changes in your files and see if changes are being tracked. This was all about creating NextJs Docker Images. Read more about NextJs on neveropen for neveropen.