vercel-deployment

# Vercel Deployment Expert knowledge for deploying to Vercel with Next.js ## Capabilities - vercel - deployment - edge-functions - serverless - environment-variables ## Prerequisites - Required skills: nextjs-app-router ## Patterns ### Environment Variables Setup Properly configure environment variables for all environments **When to use**: Setting up a new project on Vercel // Three environments in Vercel: // - Development (local) // - Preview (PR deployments) // - Production (main branch) // In Vercel Dashboard: // Settings → Environment Variables // PUBLIC variables (exposed to browser) NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ... // PRIVATE variables (server only) SUPABASE_SERVICE_ROLE_KEY=eyJ... // Never NEXT_PUBLIC_! DATABASE_URL=postgresql://... // Per-environment values: // Production: Real database, production API keys // Preview: Staging database, test API keys // Development: Local/dev values (also in .env.local) // In code, check environment: const isProduction = process.env.VERCEL_ENV === 'production' const isPreview = process.env.VERCEL_ENV === 'preview' ### Edge vs Serverless Functions Choose the right runtime for your API routes **When to use**: Creating API routes or middleware // EDGE RUNTIME - Fast cold starts, limited APIs // Good for: Auth checks, redirects, simple transforms // app/api/hello/route.ts export const runtime = 'edge' export async function GET() { return Response.json({ message:...