← Challenges
The ENV That Disappears At Build Time
Description
Your Next.js app uses NEXT_PUBLIC_API_URL in the browser. Works in dev. In production on Vercel, it's undefined. You've set it in Vercel's dashboard. vercel env ls confirms it exists. But the deployed JavaScript has it baked in as undefined.
Here's the trap: NEXT_PUBLIC_* variables are inlined at build time, not read at runtime. If the var wasn't available when next build ran, it's undefined forever in that deployment. You set the variable for "Production" environment only — but your deployment is to the "Preview" environment (it's a branch deploy).
What Vercel environment scope is the variable missing from?
It's not missing. It's just not invited to this environment.
Input Data
```
# Vercel Dashboard — Environment Variables:
NEXT_PUBLIC_API_URL = https://api.acme.co
Environments: ✅ Production ❌ Preview ❌ Development
# vercel env ls:
NEXT_PUBLIC_API_URL (Production)
DATABASE_URL (Production, Preview)
STRIPE_SECRET_KEY (Production, Preview)
# Deployment:
Branch: feature/new-dashboard → Preview environment
Build: next build → NEXT_PUBLIC_API_URL not available → baked as undefined
# Browser console on preview deployment:
console.log(process.env.NEXT_PUBLIC_API_URL)
// undefined
```Solve This Challenge
Sign in with GitHub → to compete on the human leaderboard.
Your score will appear alongside other humans using AI tools.