部署

Next.js 可以用多种方式部署:托管平台(Vercel、Netlify、Cloudflare…)、自建 Node.js 服务器、Docker、静态导出,甚至通过 Adapter 对接其它运行时。本章概览这些路径,帮你在生产环境做出合适选择。

构建产物

pnpm build   # next build
pnpm start   # next start

next build 会输出:

  • .next/server/ —— 服务端渲染代码、Server Components、Route Handlers。
  • .next/static/ —— 客户端 JS、CSS、静态资源(带内容哈希,长缓存安全)。
  • .next/standalone/(可选) —— 只包含运行所需的最小 Node 代码 + node_modules

next start 以生产模式启动 Node.js 服务。

一、托管到 Vercel 等平台

Next.js 的 “zero-config” 部署体验最完整的就是 Vercel。你只需把仓库连上去,平台会自动识别:

  • Server Components / SSR / ISR
  • Partial Prerendering(PPR)
  • Image Optimization
  • Middleware / Edge Runtime
  • Cron Jobs、Skew Protection 等

Netlify、Cloudflare Pages、AWS Amplify 等通过各自的 Adapter 也提供近似能力。

二、自建 Node.js 服务器

只要运行环境支持 Node.js 20.9+,就可以直接用 next start

node_modules/.bin/next start -p 3000

常见部署做法:

  1. CI 中执行 pnpm install --prod=false && pnpm build
  2. .next/public/package.jsonnode_modules(或 standalone)拷贝到服务器。
  3. 用 PM2 / systemd / supervisor 守护进程。
  4. 前面放 Nginx / Caddy 做 TLS、gzip、静态资源缓存。

Standalone 输出

next.config.js 开启:

module.exports = { output: 'standalone' };

构建后复制 .next/standalone + .next/static + public,启动:

node .next/standalone/server.js

镜像体积会小非常多,非常适合容器化部署。

三、Docker 部署

基于 output: 'standalone' 的典型多阶段 Dockerfile:

FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN corepack enable && pnpm build

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

四、静态导出

如果站点完全静态(无 Server Action、无 SSR),可以直接导出成静态文件:

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

产物在 out/,可托管到任意静态服务器(Nginx、CDN、GitHub Pages)。注意:

  • 不能用 Server Actions、Route Handlers 的动态 API、next/image 默认优化等。
  • 可以用 next/imageunoptimized 模式或第三方 loader。

五、Adapter:面向其它运行时

Next.js 通过 Adapter 支持 Cloudflare Workers、Netlify Edge、Deno 等:

  • @opennextjs/cloudflare
  • @netlify/next
  • @vercel/next(官方)

next.config.js 里配置对应 Adapter,再按平台文档部署即可。Adapter 会负责把构建产物转成运行时可执行的格式。

生产环境的几个“要点”

  1. 设置环境变量:数据库、第三方密钥通过平台环境变量注入;本地用 .env.local,不要提交。
  2. 缓存策略.next/static/ 长缓存(immutable),页面响应结合 cacheLife / revalidateTag 管理。
  3. 镜像安全:多阶段构建,runner 阶段用非 root 用户。
  4. 观测:启用 instrumentation.ts、接入 OpenTelemetry / Sentry / Datadog。
  5. Skew Protection:长时间用户仍能访问旧版本资源;在 Vercel 自动启用,自托管可用 deploymentId 实现。

跟 Nuxt 比较

  • Nuxt 用 Nitro,一键生成 Node / Cloudflare / Lambda 等 preset。
  • Next.js 的 Adapter 方向接近 Nitro preset,只是需要额外适配包。

选择部署方式前,先确认以下三件事:

  • 是否需要 SSR / Server Actions;
  • 是否需要细粒度缓存与边缘能力;
  • 运维成本(托管 vs 自建)能承受到什么程度。

匹配好这三点,再从上面任选一条路径上线即可。

部署

Next.js 可以透過多種方式部署:代管平台(Vercel、Netlify、Cloudflare…)、自建 Node.js 伺服器、Docker、靜態匯出,甚至經由 Adapter 接上其他執行時。本章概覽這些路徑,協助你在正式環境做出合適選擇。

建置產物

pnpm build   # next build
pnpm start   # next start

next build 會輸出:

  • .next/server/ —— 伺服器端渲染程式碼、Server Components、Route Handlers。
  • .next/static/ —— 客戶端 JS、CSS、靜態資源(附內容雜湊,可安全長快取)。
  • .next/standalone/(可選) —— 僅包含執行所需的最小 Node 程式碼 + node_modules

next start 以正式模式啟動 Node.js 伺服器。

一、部署至 Vercel 等平台

Next.js 的 “zero-config” 體驗最完整者非 Vercel 莫屬。只需接上儲存庫,平台會自動辨識:

  • Server Components / SSR / ISR
  • Partial Prerendering(PPR)
  • Image Optimization
  • Middleware / Edge Runtime
  • Cron Jobs、Skew Protection 等

Netlify、Cloudflare Pages、AWS Amplify 等透過各自的 Adapter 也能提供近似能力。

二、自建 Node.js 伺服器

只要執行環境支援 Node.js 20.9+,即可直接使用 next start

node_modules/.bin/next start -p 3000

常見流程:

  1. CI 中執行 pnpm install --prod=false && pnpm build
  2. .next/public/package.jsonnode_modules(或 standalone)複製至伺服器。
  3. 以 PM2 / systemd / supervisor 維持處理程序。
  4. 前面放 Nginx / Caddy 處理 TLS、gzip、靜態資源快取。

Standalone 輸出

next.config.js 啟用:

module.exports = { output: 'standalone' };

建置後將 .next/standalone + .next/static + public 一同部署,啟動:

node .next/standalone/server.js

映像檔體積大幅降低,極適合容器化。

三、Docker 部署

基於 output: 'standalone' 的多階段 Dockerfile 範例:

FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN corepack enable && pnpm build

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

四、靜態匯出

若網站完全靜態(無 Server Action、無 SSR),可直接匯出靜態檔案:

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

產物位於 out/,可上架至任意靜態伺服器(Nginx、CDN、GitHub Pages)。注意:

  • 無法使用 Server Actions、Route Handlers 的動態 API、next/image 預設優化等。
  • 可使用 next/imageunoptimized 模式或第三方 loader。

五、Adapter:支援其他執行時

Next.js 透過 Adapter 支援 Cloudflare Workers、Netlify Edge、Deno 等:

  • @opennextjs/cloudflare
  • @netlify/next
  • @vercel/next(官方)

next.config.js 中設定對應 Adapter,再依平台文件部署即可。Adapter 會將建置產物轉換成執行時可用的格式。

正式環境幾個重點

  1. 環境變數:資料庫、第三方金鑰一律由平台注入;本地用 .env.local,切勿提交。
  2. 快取策略.next/static/ 長期快取(immutable),頁面回應搭配 cacheLife / revalidateTag 管理。
  3. 映像安全:多階段建置,runner 階段使用非 root 使用者。
  4. 觀測性:啟用 instrumentation.ts,串接 OpenTelemetry / Sentry / Datadog。
  5. Skew Protection:長時間停留的使用者仍能存取舊版資源;Vercel 自動啟用,自建可用 deploymentId 實作。

對比 Nuxt

  • Nuxt 以 Nitro 為核心,一鍵產出 Node / Cloudflare / Lambda 等 preset。
  • Next.js 的 Adapter 機制方向接近 Nitro preset,只是需額外的適配套件。

選擇部署方式前,先確認三件事:

  • 是否需要 SSR / Server Actions;
  • 是否需要細粒度快取與邊緣能力;
  • 營運成本(代管 vs 自建)可承受至何程度。

依此三點配對,再從上述路徑任選其一上線即可。

Deploying

Next.js can be deployed in several ways: managed platforms (Vercel, Netlify, Cloudflare…), a self-hosted Node.js server, Docker, static export, or through adapters that target other runtimes. This chapter surveys those paths so you can pick the right one for production.

Build output

pnpm build   # next build
pnpm start   # next start

next build produces:

  • .next/server/ — SSR code, Server Components, Route Handlers.
  • .next/static/ — client JS, CSS, static assets (content-hashed; safe to cache forever).
  • .next/standalone/ (optional) — the minimal Node app plus the node_modules it needs.

next start launches the Node.js server in production mode.

1. Hosted platforms (Vercel & co.)

Next.js has its smoothest zero-config experience on Vercel. Connect the repo and the platform auto-detects:

  • Server Components / SSR / ISR
  • Partial Prerendering (PPR)
  • Image Optimization
  • Middleware / Edge Runtime
  • Cron Jobs, Skew Protection, etc.

Netlify, Cloudflare Pages, AWS Amplify, and others provide similar capabilities through their respective adapters.

2. Self-hosted Node.js server

Any environment with Node.js 20.9+ can run next start directly:

node_modules/.bin/next start -p 3000

Typical deployment steps:

  1. In CI, run pnpm install --prod=false && pnpm build.
  2. Ship .next/, public/, package.json, node_modules (or standalone) to the server.
  3. Use PM2 / systemd / supervisor to keep the process alive.
  4. Put Nginx / Caddy in front for TLS, gzip, and static caching.

Standalone output

Enable in next.config.js:

module.exports = { output: 'standalone' };

Copy .next/standalone + .next/static + public and launch:

node .next/standalone/server.js

The resulting image is dramatically smaller — ideal for containers.

3. Docker

A multi-stage Dockerfile built around output: 'standalone':

FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable && pnpm install --frozen-lockfile

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN corepack enable && pnpm build

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

4. Static export

If the site is fully static (no Server Actions, no SSR), export HTML files:

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

Artifacts land in out/ and can be served by any static host (Nginx, CDN, GitHub Pages). Caveats:

  • No Server Actions, no dynamic Route Handler APIs, no default next/image optimization.
  • Use next/image's unoptimized mode or a third-party loader instead.

5. Adapters: other runtimes

Adapters make Cloudflare Workers, Netlify Edge, Deno, and more possible:

  • @opennextjs/cloudflare
  • @netlify/next
  • @vercel/next (first-party)

Wire up the adapter in next.config.js, then follow the platform's docs. The adapter transforms the build output into something the target runtime can execute.

Production checklist

  1. Environment variables — inject secrets via the platform. Use .env.local locally; never commit it.
  2. Caching strategy.next/static/ is immutable; tune page responses with cacheLife / revalidateTag.
  3. Image hardening — use multi-stage builds and run the runner stage as a non-root user.
  4. Observability — enable instrumentation.ts and wire up OpenTelemetry / Sentry / Datadog.
  5. Skew protection — long-lived users should still be able to fetch their original chunk versions. Vercel enables this automatically; self-host with deploymentId.

Compared to Nuxt

  • Nuxt uses Nitro, which produces presets for Node, Cloudflare, Lambda, etc. out of the box.
  • Next.js adapters aim in the same direction as Nitro presets but require additional adapter packages.

Before picking a deployment target, confirm:

  • Whether you need SSR / Server Actions;
  • Whether you need fine-grained caching or edge capabilities;
  • How much operations overhead you're willing to absorb (managed vs self-hosted).

Line those up, then pick the path above that fits.