← All errors · Next.js

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

1. Rename the variable for client use (never do this for secrets):

   # .env.local
   NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co

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

• Works locally but fails on Vercel
• supabaseUrl is required