Deploying & Performance
Deploy to Vercel or any Node host, and lean on Next's built-in optimizations for speed.
A Next.js app can deploy to Vercel (the zero-config home of the framework) or to any platform that runs Node.js, a container, or a static host — depending on your rendering choices.
A production checklist
- Run
npm run buildand review the static vs dynamic route report. - Use
next/imageandnext/fontfor automatic asset optimization. - Cache data with
revalidateso most requests hit the cache. - Keep Client Components small to ship less JavaScript.
- Set environment variables in your host's dashboard, not in code.
Example
# Typical deploy flow on any Node host
npm run build # optimized production build
npm run start # serve it (or `node .next/standalone/server.js`)
# On Vercel: push to Git and it builds & deploys automatically.When to use it
- A developer pushes to GitHub and Vercel automatically builds, deploys, and provides a preview URL for the PR.
- A team deploys a Next.js app on a VPS using a Dockerfile and nginx as a reverse proxy on port 80.
- An ops engineer enables Next.js automatic static optimisation to serve pre-rendered pages from a CDN without server costs.
More examples
Vercel deployment config
vercel.json can pin the build command and region; without it Vercel auto-detects Next.js and uses sensible defaults.
{
"buildCommand": "npm run build",
"outputDirectory": ".next",
"framework": "nextjs",
"regions": ["iad1"]
}Self-host with Node start
Any server with Node.js can host Next.js by running next start after the build, serving both SSR and static content.
# On the server:
npm ci --omit=dev
npm run build
PORT=3000 NODE_ENV=production npm run startNginx reverse proxy config
Nginx proxies public port 80 to the Next.js server on 3000, adding host headers needed for SSR redirects.
# /etc/nginx/sites-enabled/myapp
server {
listen 80;
server_name myapp.com;
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
Discussion