Docker

[timid ocean]

How can i dockerize and use nginx for the deployment?

[gray jungle]

Hi @timid ocean. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Here are the supported ways to deploy Next.js with Docker and Nginx, based on the provided sources:

• Next.js supports deployment as a Docker container and works behind reverse proxies like Nginx. Use the official Docker example as a baseline (standalone output) and place Nginx in front to proxy traffic to the Next.js container (Deploying > Docker).
• For local/dev HMR through Nginx, proxy the HMR WebSocket path to avoid reload issues:

  location /_next/webpack-hmr {
    proxy_pass <http://<next-container-name>:3000/_next/webpack-hmr;>
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
  

  This fixes HMR refresh and connection issues when developing via Docker + Nginx (Hot reload issue, Docker + Nginx refresh fix).
• If serving your app at a sub-path (e.g., /myapp), configure basePath and assetPrefix in next.config, and ensure Nginx proxies that sub-path to the app. Misconfiguration can cause assets to be loaded from root; verify all assets resolve under the basePath and the proxy path is correct (basePath at sub path).
• For Docker networking with other services (e.g., a backend), call them by the Docker Compose service name (e.g., http://backend:8000). If you see ENOTFOUND, confirm network, service names, and that Next.js runs with output: 'standalone' exposing HOSTNAME=0.0.0.0, and that your proxy and service discovery work as expected (Docker network comms issue).

Minimal example:

1. Build Next.js as standalone Docker image (use the official example as a template):

• Example repo: with-docker template (Docker example) referenced from the docs (Deploying > Docker).

2. Nginx reverse proxy to Next.js (production):

server {
  listen 80;
  server_name my-server.com;

  location / {
    proxy_pass <http://next:3000/;>
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

  # If you develop via Docker and need HMR:
  location /_next/webpack-hmr {
    proxy_pass <http://next:3000/_next/webpack-hmr;>
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

This pattern (proxy_pass to the Next.js container) is the recommended approach when keeping the domain on a legacy/proxy server or incrementally migrating, and mirrors Vercel’s guidance on using reverse proxies in front of apps with basePath routing (Incremental migration: reverse proxy).

Notes:

• Docker is fully supported for Next.js deployments (including orchestrators) per the docs. For Mac/Windows development, consider running next dev locally for better performance rather than inside Docker (Deploying > Docker).
• Vercel does not run Docker images directly; Docker is for your own infra or local workflows (Vercel guide: Docker deployments).

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: