用 AI 自动配置 Next.js 部署 Vercel 环境
解决 Next.js 项目部署 Vercel 时的环境配置难题：自动管理多环境变量、区分 Edge 与 Serverless 运行时、处理跨域与缓存策略，确保生产环境安全与性能。
为什么需要这个技能
Next.js 迁移到 Vercel 并非简单上传代码，涉及复杂的环境变量隔离与运行时选择。特别是 NEXT_PUBLIC_* 前缀变量会打包进客户端代码，暴露密钥风险。此外，Vercel Serverless 函数有 50MB 大小限制和超时限制，Edge 运行时不支持 Node.js 标准 API。
AI 能自动帮你区分开发、预览、生产环境，检测敏感变量错误暴露，并针对大文件包优化冷启动速度，避免部署失败。
适用场景
- 新项目初始化，需要在 Vercel 创建多环境（Dev/Preview/Prod）。
- 处理 API 跨域请求被浏览器拦截（CORS）的问题。
- 数据库 URL 等敏感配置在构建时泄露导致运行时错误。
- 静态页面更新后数据不刷新，或动态资源加载缓慢。
- 使用 Edge 运行时调用
fs、path等 Node 原生模块导致报错。
核心工作流
- 环境隔离：在 Vercel Dashboard 设置
Production、Preview、Development三套变量。生产环境使用真实数据库与密钥，预览环境使用测试数据，严禁混淆。 - 运行时选择：
- 简单中间件或鉴权逻辑用
edge运行时，体积小快。 - 涉及数据库查询、文件操作或调用复杂库时用
nodejs运行时。 - 注意 Edge 不支持
fs、path等模块，需改用crypto.subtle或异步流。
- 简单中间件或鉴权逻辑用
- 构建优化：配置
next.config.js使用standalone输出，利用动态导入处理大依赖，添加 Bundle Analyzer 分析包体积。 - 缓存控制：对动态页面设置
revalidate，或通过revalidatePath在服务端修改数据后手动清除缓存。
下载和安装
下载 vercel-deployment 中文版 Skill ZIP
解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。
你可能还需要
暂无推荐