vercel-deployment

Expert guidance for deploying Next.js applications to Vercel with environment and runtime optimization. Expert knowledge for deploying to Vercel with Next.js 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= 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' 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: 'Hello from Edge!' }) } // middleware.ts (always edge) export function middleware(request:...