vercel-deployment

Configure variables in Vercel Dashboard under Settings → Environment Variables, separating Development, Preview, and Production values. Use NEXT_PUBLIC_ only for public values like anon keys; keep secrets like DATABASE_URL server-only.

Use the Edge runtime for fast cold starts and simple tasks like auth checks and redirects. Use the Node.js serverless runtime when you need fs, database drivers, or native modules, since Edge lacks most Node.js APIs.

NEXT_PUBLIC_ variables are inlined into the browser JavaScript bundle at build time, so anyone can read them in DevTools. Never prefix secrets like SUPABASE_SERVICE_ROLE_KEY, STRIPE_SECRET_KEY, or DATABASE_URL with NEXT_PUBLIC_.

Large function bundles, often from heavy dependencies like sharp or puppeteer, cause 1-5+ second cold starts and can exceed the 50MB limit. Use dynamic imports, move work to the Edge runtime, or offload heavy tasks to external services.

Vercel caches static and dynamic pages at the edge, serving old versions until the cache expires. Set export const revalidate, use force-dynamic, or call revalidatePath and revalidateTag after mutations to purge cached content.

Add Access-Control-Allow-Origin, Allow-Methods, and Allow-Headers headers to your API route responses, and implement an OPTIONS handler for preflight requests. You can also set headers globally for /api/:path* in next.config.js.