⚡ 三大 AI 课程上线:开发 · 投放 · 视频,每门 ¥1299 终身学习 立即了解

灵犀码灵犀
返回博客
Vercel部署Next.js

Next.js 网站 Vercel 部署清单:从本地到上线

环境变量、域名、预览环境与常见构建失败排查,助你 30 分钟内部署上线。

2026年5月5日3 分钟阅读

本地 npm run dev 能跑,不等于能上线。这份清单帮你一次部署成功。

部署前检查

  • npm run build 本地通过
  • .env.local 未提交 Git(使用 Vercel 环境变量面板)
  • NEXT_PUBLIC_SITE_URL 设为生产域名

Vercel 步骤

  1. Import GitHub 仓库
  2. Framework Preset 选 Next.js
  3. 在 Settings → Environment Variables 填入 Supabase、Stripe、Resend 密钥
  4. Deploy

环境变量分组

变量环境
NEXT_PUBLIC_*Production + Preview
STRIPE_SECRET_KEY仅 Production(测试可用 Preview 测试 key)
STRIPE_WEBHOOK_SECRETProduction 与 CLI 本地各一套

自定义域名

在 Vercel Domains 添加域名后,按提示配置 DNS(推荐 CNAME 到 cname.vercel-dns.com)。
Supabase / Stripe 的 Redirect URL 记得同步改为 https://你的域名.com/...

构建失败常见原因

  • Edge 不兼容:Stripe Webhook 需 runtime = 'nodejs'
  • 缺少 env:构建期访问 process.env 未定义
  • TypeScript 错误:本地先 npm run build

更多内容

完整部署章节见 实战项目:项目初始化。需要手把手视频?查看课程

想系统学习 AI 编程?

码灵犀提供完整 Cursor 教程与实战项目,零基础也能上线自己的产品。

准备好开始你的 AI 编程之旅了吗?
立即开始学习 AI 开发教程

通过专业的 Cursor 教程,掌握强大的 AI 编程工具,让你的开发效率提升 10 倍。