← All errors · Next.jsNext.js App Router & config errors
Environment variable is undefined in the browser
Exact error
process.env.MY_VAR is undefined (client side)
What it means
Next.js only exposes environment variables to browser code if their name starts with NEXT_PUBLIC_. Their values are inlined at build time.
Likely causes
- Variable not prefixed with NEXT_PUBLIC_.
- Variable added after the build. Public vars are baked in at build time, so you must rebuild/redeploy.
- Variable set locally in .env.local but not in the Vercel project settings.
How to fix it
Rename the variable for client use (never do this for secrets):
# .env.local NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.coRestart the dev server after editing .env files.
On Vercel, add the variable under Project → Settings → Environment Variables for the right environments, then redeploy.
Prevent this next time
- Run `next build` (not just `next dev`) before every deploy; several of these errors only appear in production builds.
- Keep a checked-in `.env.example` listing every required variable.
FAQ
What does "Environment variable is undefined in the browser" mean?
Next.js only exposes environment variables to browser code if their name starts with NEXT_PUBLIC_. Their values are inlined at build time.
What usually causes it?
Variable not prefixed with NEXT_PUBLIC_. Variable added after the build. Public vars are baked in at build time, so you must rebuild/redeploy. Variable set locally in .env.local but not in the Vercel project settings.
How do I fix it?
1. Rename the variable for client use (never do this for secrets): 2. Restart the dev server after editing .env files. 3. On Vercel, add the variable under Project → Settings → Environment Variables for the right environments, then redeploy.
Related errors
Get new fixes weekly
No spam. Unsubscribe anytime. Privacy