Get a $149 diagnosis

Error library

Next.js env var undefined in the browser: missing NEXT_PUBLIC_

Next.js only exposes environment variables prefixed with NEXT_PUBLIC_ to the browser; others exist only on the server. Rename public values to NEXT_PUBLIC_*, set them on your host, and rebuild, because they're inlined at build time.

Cause: A client component reads a variable without the NEXT_PUBLIC_ prefix, or it was added after the build.

How to fix it

  1. Rename public values (e.g. Supabase URL, anon key) to NEXT_PUBLIC_*.
  2. Set them in your host's env settings for the right environment.
  3. Redeploy: NEXT_PUBLIC_ values are inlined at build time.
  4. Never prefix secrets with NEXT_PUBLIC_.

Example

Illustrative example, not from a customer project.

- SUPABASE_URL=https://xyz.supabase.co
+ NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co

FAQ

It works in server code but not in a component.

Server code can read all env vars; the browser only gets NEXT_PUBLIC_ ones.

I changed the value but nothing changed.

Rebuild; the old value is baked into the bundle.

Get a $149 diagnosis See pricing Launching soon? The Launch Path gets you ready for $1,195 flat.

$149Get a $149 diagnosis