Vercel 应用部署

你在解决什么问题

把 Next.js 应用推到 Vercel 时，常见问题不是「点一下 Deploy」，而是环境变量在构建期与运行期读法不同、预览和生产共用数据库、API 路由该走 Edge 还是 Serverless，以及函数体积过大导致冷启动变慢。本技能把 Vercel 在规模化部署上的能力、限制和惯例整理成可执行的判断框架。

技能如何帮你落地

技能以五条原则组织实践路径：

• 环境变量：为开发、预览、生产分别配置，理解哪些值会在浏览器侧通过 NEXT_PUBLIC_ 暴露
• 运行时选型：为 API 路由在 Edge 与 Serverless 之间做兼容性检查（Edge 缺少部分 Node.js API）
• 构建优化：控制包体积、利用构建缓存，缩短部署时间与冷启动
• 预览部署：先走预览环境验证，再进生产
• 监控：配合分析与错误追踪，避免「部署成功但行为异常」无人察觉

典型工作流包括：按环境设置变量 → 为路由选运行时 → 优化构建 → 预览验证 → 生产发布，并与 nextjs-app-router、supabase-backend 等技能衔接后端与路由约定。

边界与注意点

明确反模式：不要把机密放进 NEXT_PUBLIC_；不要让预览环境直连生产库；不要忽视构建缓存。常见问题表中还覆盖函数超时、CORS、部署后页面缓存导致数据「看起来过时」等中等严重度场景——技能侧重给出对应处理方向，而不是替代你在项目里的具体架构决策。