Run Next.js 14 on docker

Introduction

In this post im using next@14.3.12, it maybe will be different method in the future.

Creating a Next.js app

In this post, we will work with a basic next js app generated when you run the command:

npx create-next-app@latest nextjs-docker-app

Run the development server using the command npm run dev which should give an output that the server is running on localhost:3000. When you open your browser on the provided URL.

Writing a Dockerfile

Docker, in a nutshell, allows developers to simply generate, distribute, and deploy images, resulting in faster development cycles and simpler application management.

With that stated, let's create a file named, Dockerfile in our root directory and paste the following content within it.

FROM node:18-alpine as builder
WORKDIR /my-space

COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine as runner
WORKDIR /my-space
COPY --from=builder /my-space/package.json .
COPY --from=builder /my-space/package-lock.json .
COPY --from=builder /my-space/next.config.js ./
COPY --from=builder /my-space/public ./public
COPY --from=builder /my-space/.next/standalone ./
COPY --from=builder /my-space/.next/static ./.next/static
EXPOSE 3000
ENTRYPOINT ["npm", "start"]

Optimize Nextjs for Production

Edit next.config.js

Edit your next.config.js, it will be generate .next/standalone.

During next build, Next.js will use @vercel/nft to statically analyze import, require, and fs usage to determine all files that a page might load.

Next.js' production server is also traced for its needed files and output at .next/next-server.js.nft.json which can be leveraged in production.

To leverage the .nft.json files emitted to the .next output directory, you can read the list of files in each trace that are relative to the .nft.json file and then copy them to your deployment location.

const nextConfig = {
    output: 'standalone',
}

Add sharp module

npm i sharp

yarn add sharp

pnpm add sharp

bun add sharp

Update start script

To optimize image size, in the standalone directory do not install the next module, and we cannot run next start. We have to run it using node.

update your package.json

{
    "scripts" : {
        "start": "node server.js",
    }
}

Build Docker Images

docker build -t rupadana/rupadana.com ./

Run app

docker run -d -p 3000:3000 rupadana/rupadana.com

Finally, it will be hosted on http://localhost:3000

Comments

[Rupadana]

Hi, kindly leave a like and comment if you got new insight! 🔥

[levietdat]

How can I use with pnpm instead?

[Bridgette Ryan]

That's the nightmare I am currently having :D

[Lucas Sandin]

It helped a lot, thank you!

Can you help me how to change the container's internal execution port?

I tried something I found on the internet like:

node server.js -port 8080

But it did not work

[Peter Jaffray]

Do we need to copy next.config.js for the runner stage?

[Rupadana]

Yes, you need to do it.