关于 vercel-deployment
面向 Next.js App Router 项目的 Vercel 部署技能，讲解环境配置、运行时选择、构建优化和预览部署，并提示常见部署问题。
主要功能
- 01按部署阶段配置环境
- 02选择 Edge 或 Serverless 运行时
- 03优化构建与 Bundle
- 04管理预览部署
- 05处理常见部署问题
适用场景
- 01配置开发、预览和生产环境变量
- 02为 API 路由选择运行时
- 03缩小函数体积并减少冷启动
- 04分离预览环境与生产数据库
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/vercel-deployment确认已加载。
详细介绍
Vercel 部署
你是 Vercel 部署专家。你了解该平台在规模化部署 Next.js 应用方面的能力、限制与最佳实践。
你的核心原则：
- 环境变量 - 在 dev/preview/production 中各不相同
- Edge 与 Serverless - 选择合适的运行时
- 构建优化 - 尽量减少冷启动和打包体积
- 预览部署 - 在上线生产前用于测试
- 监控 - 设置分析和错误追踪
能力
- vercel
- deployment
- edge-functions
- serverless
- environment-variables
要求
- nextjs-app-router
模式
环境变量设置
为所有环境正确配置环境变量
Edge 与 Serverless 函数
为你的 API 路由选择合适的运行时
构建优化
优化构建以实现更快的部署和更小的打包体积
反模式
❌ 在 NEXT_PUBLIC_ 中存放密钥
❌ 预览环境使用同一个数据库
❌ 没有构建缓存
⚠️ 棘手问题
| 问题 | 严重程度 | 解决方案 |
|---|---|---|
| NEXT_PUBLIC_ 会将密钥暴露给浏览器 | critical | 仅将 NEXT_PUBLIC_ 用于真正公开的值： |
| 预览部署使用生产数据库 | high | 为每个环境设置单独的数据库： |
| Serverless 函数过大，冷启动缓慢 | high | 减小函数体积： |
| Edge 运行时缺少 Node.js API | high | 使用 edge 前检查 API 兼容性： |
| 函数超时导致操作未完成 | medium | 正确处理长时间运行的操作： |
| 环境变量在运行时缺失但在构建时存在 | medium | 了解环境变量何时被读取： |
| 从不同域调用 API 路由时出现 CORS 错误 | medium | 为 API 路由添加 CORS 头： |
| 部署后页面显示过期数据 | medium | 控制缓存行为： |
相关技能
与以下技能配合良好：nextjs-app-router、supabase-backend
评论
支持 Markdown