部署 Next.js 应用
Next.js 的 SSR/SSG/ISR 部署，支持图片优化、API 路由和中间件，可部署到 Vercel 或自托管。
平台进阶
为什么
Next.js 在一个框架内支持混合渲染（SSG + SSR + ISR），Vercel（其创建者）提供零配置部署、边缘中间件和图片优化。通过 standalone 输出自托管可获完全控制。
何时使用
SEO 敏感的营销站、电商和需要 SSR 的仪表盘用 Next.js。需要自定义基础设施或气隙环境时自托管。
如何做
1. Vercel 路径 — git push，自动检测，零配置
2. 自托管 — next.config.js output: "standalone"，生成 .next/standalone
3. Docker — 复制 standalone + static 到最小镜像，node server.js
4. API 路由 — Vercel 上为 serverless 函数，自托管在 Node 容器运行
5. 图片 — next/image 用 Vercel 优化器；自托管设 images.unoptimized 或自定义 loader
6. 中间件 — 边缘（Vercel）或 Node（自托管）运行，鉴权/地理/重写
7. ISR — revalidate 属性按需重生成页面，自托管需持久存储
示例
// next.config.js — 自托管 standalone 输出
/** @type {import('next').NextConfig} */
module.exports = {
output: "standalone",
images: { unoptimized: process.env.SELF_HOSTED === "true" },
};
// Dockerfile（自托管）
FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN npm ci && npm run build
FROM node:20-alpine
WORKDIR /app
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"]
// middleware.ts — 边缘鉴权
export function middleware(req: NextRequest) {
if (!req.cookies.get("token")) return NextResponse.redirect("/login");
}
export const config = { matcher: ["/dashboard/:path*"] };
常见问题
- ⚠自托管 ISR 重启丢缓存 — 无持久存储，页面冷重渲染
- ⚠自托管图片优化 502 — 忘记禁用或配置 sharp/loader
- ⚠中间件在 Node 而非边缘运行 — 旧版 Next.js 或自托管无边缘运行时
最佳实践
- ✓Docker 部署用 output: 'standalone' — 生成最小自包含服务器
- ✓images.formats 仅设所需格式（avif、webp）以减少优化成本
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求