Fix: Vercel Environment Variables Are Undefined in Production
Quick Answer
Go to Vercel Dashboard > Project > Settings > Environment Variables. Add every variable from your .env.local file. Remember: client-side variables need the NEXT_PUBLIC_ prefix. Redeploy after adding variables.
Symptoms
- !process.env.DATABASE_URL is undefined on Vercel
- !App works locally but env vars fail in production
- !NEXT_PUBLIC_ variables work but server-side ones don't
- !Error: Missing required environment variable
Step-by-Step Fix
Add variables in Vercel dashboard
Vercel Dashboard > your project > Settings > Environment Variables. Add each variable: name, value, and which environments (Production, Preview, Development) it applies to.
Check the NEXT_PUBLIC_ prefix
Variables used in client-side code (React components) MUST start with NEXT_PUBLIC_. Server-only variables (API routes, server components) should NOT have this prefix.
Redeploy after adding
Environment variables are baked in at build time. After adding or changing variables, trigger a new deployment: push a commit or click 'Redeploy' in the Vercel dashboard.
Check environment scope
Vercel lets you set variables for Production, Preview, or Development separately. Make sure your variable is enabled for 'Production' if it's failing on your live site.
Frequently Asked Questions
Locally, Next.js reads from .env.local automatically. Vercel doesn't read .env.local — you must add each variable manually in the Vercel dashboard or via the Vercel CLI.
Yes. Environment variables are injected at build time. A new deployment is required for changes to take effect.
Related
Weekly Newsletter
Get next week's fix before you need it.
Join developers getting weekly vibe coding tips, error fixes, and tool updates.
Subscribe on Substack →