process.env variable is undefined

process.env.NEXT_PUBLIC_SUPABASE_URL is undefined

In one sentence: Your app can't see an environment variable, usually because of its name, where it's defined, or when it was loaded.

What it means

Environment variables hold settings and secrets outside your code. They're read when the server starts or when the app is built, and browser code can only see variables that are specifically marked public.

Common causes

In Next.js, browser code can only read variables starting with `NEXT_PUBLIC_`. In Vite it's `VITE_`, read via `import.meta.env.VITE_...`.
You edited `.env.local` but didn't restart the dev server.
The variable is only in your local file and was never added to Vercel/Netlify settings.
`NEXT_PUBLIC_` values are baked in at build time, so after changing one in Vercel you need to redeploy.
A typo, extra spaces, or quotes in the .env file, or the file is in the wrong folder (it must be in the project root).

How to fix it

Check the exact name matches in the .env file and in the code.
If it's used in the browser and isn't a secret, give it the right prefix (`NEXT_PUBLIC_` / `VITE_`). Never put secret keys behind a public prefix.
Restart the dev server after editing .env files.
Add the variable in your host's dashboard for the right environment and redeploy.

Example

# .env.local (project root, no quotes or spaces needed)
NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
OPENAI_API_KEY=sk-...   # server-only, no NEXT_PUBLIC_ prefix

Prompt to paste into your AI tool

An environment variable is undefined. Check its name, whether it needs the NEXT_PUBLIC_/VITE_ prefix (only if it's not a secret), that it's defined in the deployed environment, and remind me to restart/redeploy.

Still stuck?

Paste your exact error and code. Get a plain-English explanation free, or the full fix for $5.

Paste your error

Related errors

Weekly: the errors breaking vibe-coded apps and how to fix them. Free.

No spam. Unsubscribe anytime.