vercel-deployment

Configure environment variables in the Vercel Dashboard under Settings, separating Development, Preview, and Production values. Use NEXT_PUBLIC_ only for browser-safe values and keep secrets like database URLs server-only.

Use the edge runtime for fast cold starts and simple tasks like auth checks or redirects. Use the Node.js serverless runtime when you need full Node APIs such as fs, database drivers, or heavy computation.

NEXT_PUBLIC_ variables are inlined into the JavaScript bundle at build time and visible in browser DevTools. Never use this prefix for service role keys, database URLs, or JWT secrets; access those only in server-side code.

Slow cold starts usually come from large function bundles exceeding efficient size limits, often caused by heavy dependencies like puppeteer or sharp. Use dynamic imports, the edge runtime, or external services for heavy processing.

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 in next.config.js for all /api routes.

Vercel caches pages aggressively at the edge, so old versions may be served until the cache expires. Use export const revalidate, force-dynamic, or on-demand revalidation with revalidatePath and revalidateTag to control freshness.