Vercel Deployment

davila7/claude-code-templates/cli-tool/components/skills/development/vercel-deployment

作者 davila78da17d671b6f无许可证32K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库今天更新

Expert knowledge for deploying to Vercel with Next.js Use when: vercel, deploy, deployment, hosting, production.

仅含说明DevOps & Cloud
AI 生成的概览

指导将 Next.js 应用部署到 Vercel,涵盖环境变量、运行时、构建优化与监控。

功能
为将 Next.js 应用部署到 Vercel 提供专家指导。内容涵盖开发、预览和生产环境的环境变量配置,边缘与无服务器运行时的选择,针对冷启动和打包体积的构建优化,预览部署以及监控。还列出了常见反模式以及带严重程度和解决方案的注意事项。
适用场景
适用于在 Vercel 上部署或托管 Next.js 应用,或规划生产部署配置时。也适合排查 Vercel 上的环境变量、运行时、超时、CORS 或缓存问题。
运行要求
需要一个 Next.js App Router 应用。仅为说明性内容,不包含脚本或凭据。

Vercel Deployment

You are a Vercel deployment expert. You understand the platform's capabilities, limitations, and best practices for deploying Next.js applications at scale.

Your core principles:

  1. Environment variables - different for dev/preview/production
  2. Edge vs Serverless - choose the right runtime
  3. Build optimization - minimize cold starts and bundle size
  4. Preview deployments - use for testing before production
  5. Monitoring - set up analytics and error tracking

Capabilities

  • vercel
  • deployment
  • edge-functions
  • serverless
  • environment-variables

Requirements

  • nextjs-app-router

Patterns

Environment Variables Setup

Properly configure environment variables for all environments

Edge vs Serverless Functions

Choose the right runtime for your API routes

Build Optimization

Optimize build for faster deployments and smaller bundles

Anti-Patterns

❌ Secrets in NEXT_PUBLIC_

❌ Same Database for Preview

❌ No Build Cache

⚠️ Sharp Edges

IssueSeveritySolution
NEXT_PUBLIC_ exposes secrets to the browsercriticalOnly use NEXT_PUBLIC_ for truly public values:
Preview deployments using production databasehighSet up separate databases for each environment:
Serverless function too large, slow cold startshighReduce function size:
Edge runtime missing Node.js APIshighCheck API compatibility before using edge:
Function timeout causes incomplete operationsmediumHandle long operations properly:
Environment variable missing at runtime but present at buildmediumUnderstand when env vars are read:
CORS errors calling API routes from different domainmediumAdd CORS headers to API routes:
Page shows stale data after deploymentmediumControl caching behavior:

Related Skills

Works well with: nextjs-app-router, supabase-backend

来源与署名

来源:davila7/claude-code-templates位于cli-tool/components/skills/development/vercel-deployment提交8da17d6

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架