Production Optimization, Environment Variables & Vercel Deployment

Preparing a Next.js application for production requires configuring environment variables, static asset headers, image optimizations, and bundle analysis. Environment variables prefixed with NEXT_PUBLIC_ are bundled into client-side JS scripts, whereas un-prefixed variables (DATABASE_URL, API_SECRET) remain strictly hidden on the server.

When deploying to Vercel or Docker environments, Next.js generates static outputs and standalone build directories (output: 'standalone'). Continuous deployment pipelines automatically build preview environments for pull requests and atomic production deployments with instant rollback capabilities.

Before

Exposing Database Credentials (SECURITY RISK)

1// ❌ DANGER: Exposes private credentials to browser bundle!2NEXT_PUBLIC_DATABASE_URL="postgres://user:secret@localhost:5432/db"

After

Secure Environment Variable Separation

1// ✅ Server-Only Secret (Hidden from browser bundle)2DATABASE_URL="postgres://user:secret@localhost:5432/db"3 4// ✅ Public Client Variable (Safe for browser consumption)5NEXT_PUBLIC_SITE_URL="https://coreconceptlearning.com"

Exercise

Configure next.config.ts for standalone build output, verify .env.local variable security, and run a production build test via npm run build.

Check your understanding

What happens if you prefix a secret API key with NEXT_PUBLIC_?Show answerHide answer
Answer
Next.js inlines the key into the client JavaScript bundle, exposing it publicly to any site visitor.
What is the purpose of the next.config.ts standalone output option?Show answerHide answer
Answer
It builds a minimal Docker-friendly node server directory containing only the necessary node_modules required to run the production app.