Next.js Deploy Next 部署
最后更新：2026-10-28
Next.js Deploy Next 部署
Next.js 部署首选 Vercel（零配置支持 ISR、图片优化与边缘函数），也可自托管 Node 或静态导出。上线前通用清单：环境变量、生产构建、SEO 元数据与域名 HTTPS，缺一步都可能出现「本地能跑、线上白屏」。
| 分组 | 生态与进阶 |
|---|---|
| 类型 | 工具链 |
| 引入版本 | Vercel 托管 Next.js 14 / 15（推荐）；自托管需 Node 18+ |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
# 本地先验证生产构建
npm run build && npm start
# Vercel CLI 部署（或推 GitHub 自动部署）
npx vercel # 预览环境
npx vercel --prod # 生产环境
# 环境变量在平台后台配置，勿提交 .env 到仓库
NEXT_PUBLIC_API_BASE=https://api.example.com # 会进入客户端代码
DATABASE_URL=... # 仅服务端可见（无 NEXT_PUBLIC_ 前缀）⚙️ 参数
| vercel --prod | 把当前目录部署到生产环境；不带 --prod 则生成一个预览链接供验收。 |
|---|---|
| NEXT_PUBLIC_ 前缀 | 只有带此前缀的环境变量会打进客户端代码，其余变量仅服务端可见，用于保护密钥。 |
返回值：无返回值，部署流程说明见语法与示例。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
模拟演示：一个交互式「部署检查清单」，四个复选项对应环境变量、生产构建、SEO 元数据与域名 HTTPS。勾选时底部就绪度从 0/4 逐项增长，全部勾选后状态文字变为绿色「✓ 可以上线了」，取消任意一项立即回到「还有未完成项」。💡 要点
⚠️ 注意 环境变量只在部署平台后台或构建环境生效，.env.local 不进仓库；修改变量后必须重新部署才会注入。
💡 提示 用预览部署验收：每次 PR 自动生成独立预览链接，确认无误再合并上线，不要直接在生产环境试。
ℹ️ 说明 静态导出（output: 'export'）不支持 ISR 与服务端 API 路由，选型前先确认项目是否依赖这些特性。
🏷️ 生态与进阶相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 不用 Vercel 能部署 Next.js 吗？
A 可以。可自托管 Node（npm start / Docker）、部署到 VPS 配合 PM2，或纯静态导出到任意静态托管；只是 ISR、图片优化等特性需自行配置或放弃。
Q 为什么线上白屏或提示环境变量缺失？
A 多数是 NEXT_PUBLIC_ 变量没在部署平台后台配置，或配置后没有重新构建部署——这类变量在构建期注入，改完必须重新 deploy 才生效。
Q 每次部署都要手动跑命令吗？
A 不用。连接 GitHub 仓库后推送即自动部署：PR 生成预览链接，合并到主分支自动上线；也可以用 GitHub Actions 定制 CI/CD 流程。
