NoVPS
FeaturesBlogSupport
Join waitlist
Tutorials

Docker for Next.js application

Thu, Jul 18, 2024

Main picture

Next.js can be deployed on any hosting provider that supports Docker containers. This method is suitable for deployment to container orchestrators like Kubernetes or for running within a container on any cloud provider.

At first you need to choose base image. We recommend to use node:18-alpine because it's lightweight but still contains all necessarry dependencies.

FROM node:18-alpine AS base # Install dependencies only when needed FROM base as deps RUN apk add --no-cache libc6-compat

Let's set up the working directory of our project. This folder will contain all necessary files for launching our application.

WORKDIR /app

Now we need to install the NPM dependencies of the project. Since this example presents a generic Dockerfile, we automatically define the package manager, but you can explicitly specify the one used in your project.

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 corepack enable pnpm && pnpm i --frozen-lockfile; \ else echo "Lockfile not found." && exit 1; \ fi

Now we need to build the application from source code. To do this, copy the installed dependencies into a new layer and run the command to build the application.

Splitting Dockerfile into layers allows you to cache steps, so that when you rebuild again, the steps that have not been changed will not be rebuilt again, which saves a lot of time.

FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN \ if [ -f yarn.lock ]; then yarn run build; \ elif [ -f package-lock.json ]; then npm run build; \ elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \ else echo "Lockfile not found." && exit; \ fi

Finally, what's left is to build the Production layer, into which we'll copy just the assembled files, statics and Nexjs helper scripts, and start the server itself.

FROM base AS runner WORKDIR /app ENV NODE_ENV production # Create user and group to restrict access to non-nextjs files RUN addgorup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public # Set the correct permissions for prerender cache RUN mkdir .next RUN chown nextjs:nodejs .next COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static # Execute all code below at behalf of user nextjs USER nextjs EXPOSE 3000 ENV PORT 3000 # server.js is created by next build from the standalone output # https://nextjs.org/docs/pages/api-reference/next-config-js/output CMD HOSTNAME="0.0.0.0" node server.js

That's it, Dockerfile is ready to go into production. To build the image, use the following command:

docker build -t nextjs-docker .

Run your container:

docker run -p --rm 3000:3000 nextjs-docker

Now you can open http://0.0.0.0:3000/ in your browser and use your app. If you need to change something in the code, do it in your favorite editor and then just rebuild the image afterwards.

Full Dockerfile:

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 corepack enable 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 . . RUN \ if [ -f yarn.lock ]; then yarn run build; \ elif [ -f package-lock.json ]; then npm run build; \ elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \ else echo "Lockfile not found." && exit 1; \ fi # Production image, copy all the files and run next FROM base AS runner WORKDIR /app ENV NODE_ENV production 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 # server.js is created by next build from the standalone output # https://nextjs.org/docs/pages/api-reference/next-config-js/output CMD HOSTNAME="0.0.0.0" node server.js

Note that you need to specify output mode as standalone in nextjs config for dockerfile to work correctly:

module.exports = { output: "standalone", };

Subscribe to stay updated

Never miss out on valuable insights and tips. Subscribe to our newsletter and get the latest blog posts delivered straight to your inbox.

Legal

Privacy PolicyTerms and ConditionsAcceptable Use Policy
NoVPS

© 2024 NoVPS Cloud LTD

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.