Dockerize and Deploy a React/Next.js App

Advanced20 min

Create a production-optimized Docker image for a Next.js application with multi-stage builds and minimal image size.

Prerequisites

-Docker installed
-Next.js project with working build

Steps

Create a multi-stage Dockerfile

Write a Dockerfile that uses separate stages for dependencies, building, and the final runtime image.

$ cat > Dockerfile << 'EOF' FROM node:20-alpine AS base FROM base AS deps WORKDIR /app COPY package.json pnpm-lock.yaml ./ RUN corepack enable pnpm && pnpm install --frozen-lockfile FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . RUN corepack enable pnpm && pnpm build FROM base AS runner WORKDIR /app ENV NODE_ENV=production RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static USER nextjs EXPOSE 3000 CMD ["node", "server.js"] EOF

Enable standalone output in next.config.ts: output: 'standalone' for a minimal production server.

Add a .dockerignore file

Exclude unnecessary files from the Docker build context to speed up builds.

$ printf 'node_modules\n.next\n.git\n*.md\nDockerfile\n.dockerignore\n.env*.local\n' > .dockerignore

Enable standalone output in Next.js config

Configure Next.js to produce a self-contained output that does not need node_modules.

$ echo "// next.config.ts\nexport default { output: 'standalone' };"

Without standalone output, the final Docker image will include all of node_modules and be significantly larger.

Build the Docker image

Build the production image with a descriptive tag.

$ docker build -t my-nextjs-app:latest .

Run the container

Start the container and map port 3000.

$ docker run -p 3000:3000 --env-file .env.production my-nextjs-app:latest

The standalone image is typically 100-150MB compared to 1GB+ without multi-stage builds.

Full Script

full-script.sh

#!/bin/bash
# Dockerize and Deploy Next.js App
set -euo pipefail

APP_NAME=${1:-my-nextjs-app}
TAG=${2:-latest}

echo "=== Building Docker image ==="
docker build -t "$APP_NAME:$TAG" .

echo ""
echo "=== Image size ==="
docker images "$APP_NAME:$TAG" --format "{{.Repository}}:{{.Tag}} - {{.Size}}"

echo ""
echo "=== Running container ==="
docker run -d -p 3000:3000 --name "$APP_NAME" "$APP_NAME:$TAG"

echo ""
echo "=== Container status ==="
docker ps --filter "name=$APP_NAME" --format "table {{.Names}}	{{.Status}}	{{.Ports}}"

echo ""
echo "App running at http://localhost:3000"

FAQ

Discussion

Loading comments...

#!/bin/bash # Dockerize and Deploy Next.js App set -euo pipefail APP_NAME=${1:-my-nextjs-app} TAG=${2:-latest} echo "=== Building Docker image ===" docker build -t "$APP_NAME:$TAG" . echo "" echo "=== Image size ===" docker images "$APP_NAME:$TAG" --format "{{.Repository}}:{{.Tag}} - {{.Size}}" echo "" echo "=== Running container ===" docker run -d -p 3000:3000 --name "$APP_NAME" "$APP_NAME:$TAG" echo "" echo "=== Container status ===" docker ps --filter "name=$APP_NAME" --format "table {{.Names}} {{.Status}} {{.Ports}}" echo "" echo "App running at http://localhost:3000"