Works Locally but Vercel Says Environment Variables Are Undefined
Quick Answer
How do I fix Works Locally but Vercel Says Environment Variables Are Undefined?
Env vars added after deployment don't apply to existing deployments. Also, browser-accessible vars need the NEXT_PUBLIC_ prefix. Start with "Add vars and REDEPLOY" before making broader code changes.
Fix signals
- What this answers
- Why works locally but vercel says environment variables are undefined happens and what to change first.
- Fastest move
- Add vars and REDEPLOY
- Use this page if
- App works locally but breaks on Vercel
If this keeps happening
Open the next decision, not just the patch
Use these when the current fix is helpful, but the real answer is a better tool choice, a cleaner workflow layer, or a more trustworthy launch path.
Deploy hub
Open this when the build error is one symptom and the bigger problem is your production handoff and hosting workflow.
Open this next →
Cursor review
Open this when deploy pain is pushing you toward a more code-first workflow with tighter control.
Open this next →
Lovable reviews
Open this when production friction is making you reconsider the tradeoff between generation speed and later cleanup cost.
Open this next →
Tool picker
Open this when the deploy pain is making you question the stack itself and you want a faster next recommendation.
Open this next →
Firecrawl review
Open this when the deployment problem is part of a broader stack rethink that also includes data-fetching and agent workflows.
Open this next →
Quick Fix Summary
| Most likely cause | Env vars added after deployment don't apply to existing deployments. Also, browser-accessible vars need the NEXT_PUBLIC_ prefix. |
| Fastest fix | Add vars and REDEPLOY |
| Use this page if | App works locally but breaks on Vercel |
Exact errors people search for
If one of these matches what you are seeing, you are likely on the right fix page.
Works locally but Vercel says environment variables are undefined Production build cannot read the env vars I just added API calls fail on the deployed site because a secret is missing
You're in the right place if...
- !App works locally but breaks on Vercel
- !Variables are undefined in production
- !API calls fail on deployed site
Why this happens
Env vars added after deployment don't apply to existing deployments. Also, browser-accessible vars need the NEXT_PUBLIC_ prefix.
Fix
Add vars and REDEPLOY
After adding env vars, you MUST redeploy. Deployments → three dots → Redeploy.
Check NEXT_PUBLIC_ prefix
Variables used in browser code need NEXT_PUBLIC_ prefix. Server-only variables must NOT have it.
# Browser-accessible (MUST have prefix): NEXT_PUBLIC_SUPABASE_URL=... NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_... # Server-only (NO prefix — keeps it secret): STRIPE_SECRET_KEY=sk_... SUPABASE_SERVICE_ROLE_KEY=...
Prevent this next time
Add all environment variables to Vercel BEFORE your first deployment. Saves a redeploy.
Frequently Asked Questions
Vercel injects env vars at build time. Existing deployments were built without your new variables.
Only for values safe to expose publicly (Supabase URL, Stripe publishable key). Never for secrets.
Related fixes
Lovable App Shows a Blank Screen After Deploy
Vercel Shows a Red X and the Deploy Never Goes Live
Lovable Login Works in Preview but Fails on the Live URL
My Domain Still Will Not Connect to Vercel
My Site Still Says Not Secure After Connecting the Domain
www Not Redirecting to Non-www