0Pricing
React Academy · Lesson

Dockerizing a React/Next.js App

Write a multi-stage Dockerfile for a Next.js app and run it locally with Docker Compose.

Dockerizing a React/Next.js App is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Docker?

Docker containers package your app and its dependencies together, ensuring consistent behavior across dev, staging, and production. The same image runs everywhere.

Dockerfile for a Plain React SPA

A two-stage build: Node.js to build, Nginx to serve the static output.

# Stage 1: Build
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2: Serve with Nginx
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Nginx Config for SPA Routing

Configure Nginx to serve index.html for all routes (client-side routing support).

# nginx.conf
server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html; # SPA routing
  }

  location ~* \.(js|css|png|jpg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

Next.js Standalone Mode Dockerfile

Next.js 12+ supports output: 'standalone' which copies only required files for a minimal production image.

// next.config.js
module.exports = { output: 'standalone' };

# Dockerfile (Next.js standalone)
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

.dockerignore

Exclude unnecessary files from the Docker build context to speed up builds and reduce image size.

node_modules
.next
dist
.env*
.git
README.md
*.test.ts

Building and Running

Build the image and run it locally.

# Build:
docker build -t my-next-app .

# Run:
docker run -p 3000:3000 -e DATABASE_URL=postgres://... my-next-app

# Check size:
docker images my-next-app

Docker Compose for Local Dev

Use Docker Compose to run the app alongside its dependencies (database, Redis) with a single command.

# docker-compose.yml
services:
  web:
    build: .
    ports: ['3000:3000']
    environment:
      DATABASE_URL: postgresql://postgres:password@db:5432/myapp
    depends_on: [db]
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp
    volumes:
      - pgdata:/var/lib/postgresql/data
volumes:
  pgdata:

Health Checks

Add a health check to the Dockerfile so orchestrators know when the container is ready.

HEALTHCHECK --interval=30s --timeout=3s \
  CMD curl -f http://localhost:3000/api/health || exit 1

Environment Variables at Runtime

Pass env vars at docker run time or via --env-file. Never bake secrets into the image.

docker run -p 3000:3000 \
  --env-file .env.production \
  my-next-app

Multi-Platform Builds

Build images for multiple CPU architectures (ARM64 for M1 Macs and cloud VMs, AMD64 for most servers) with Docker Buildx.

docker buildx build \
  --platform linux/amd64,linux/arm64 \
  -t myregistry/my-next-app:latest \
  --push .

Quick Check

What is the benefit of using multi-stage Docker builds for a React/Next.js app?

Recap

Use multi-stage Dockerfiles: Node.js for building, Nginx or node:alpine for serving. Add output: 'standalone' in Next.js config for minimal images. Use Docker Compose for local dev, pass secrets at runtime via env vars, and build multi-platform images with Buildx for ARM and AMD64 compatibility.

Frequently asked questions

Is the “Dockerizing a React/Next.js App” lesson free?

Yes — the full text of “Dockerizing a React/Next.js App” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Dockerizing a React/Next.js App”?

Write a multi-stage Dockerfile for a Next.js app and run it locally with Docker Compose. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Dockerizing a React/Next.js App” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Deploying to Vercel: Zero-Config & Preview URLs
  2. Hosting a React SPA on AWS S3 & CloudFront
  3. Dockerizing a React/Next.js App
  4. GitHub Actions CI/CD for React
← Back to React Academy