process.env.X is undefined in the browser (NEXT_PUBLIC_) Next.js Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Next.js: process.env.API_URL is undefined in Client Component / env variable not available in the browser

Only variables prefixed NEXT_PUBLIC_ are exposed to browser code, and they're inlined at build time.

Exact message you may see process.env.X is undefined in the browser Next.jsNEXT_PUBLIC_ environment variable undefinedNext.js env variable undefined client sideprocess.env.NEXT_PUBLIC_API_URL is undefinedenvironment variable not available in client component
Explore the map of this error Full error map →
Seen on: Next.js JavaScript

Meaning

Rename to NEXT_PUBLIC_API_URL and rebuild (changes need a new build because values are inlined). Server-only secrets must stay unprefixed and only be read on the server. process.env[key] dynamic access isn't inlined. Check .env.local/platform env scope (Preview vs Production).

Common causes

  • Missing NEXT_PUBLIC_ prefix
  • Variable added after build (not rebuilt)
  • Dynamic process.env[name] access
  • .env file in wrong place/name
  • Env not set on the hosting platform

⚡ Quick fix

  1. Use NEXT_PUBLIC_ for browser variables and rebuild
  2. Access as process.env.NEXT_PUBLIC_X literally
  3. Set env in Vercel/hosting for the right environment

Detailed fix by platform

Next.js

  1. console.log(process.env.NEXT_PUBLIC_API_URL) in a Client Component after next build

How to diagnose

  1. Prefix — NEXT_PUBLIC_?
  2. Build — Rebuilt?
  3. Platform — Env set?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

Conflicting app and page file was found — Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx" (Next.js)Conflicting app and p…CORS error calling Next.js API route / route handler — Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler) (Next.js)CORS error calling Ne…createContext only works in Client Components — Next.js: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client" (Next.js)createContext only wo…ERR_INVALID_ARG_TYPE — TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined (Node.js)ERR_INVALID_ARG_TYPEnext build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…next build: JavaScript heap out of memory — Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build) (Next.js)next build: JavaScrip…npm update check failed — npm update check failed — Try running with sudo or get access to the local update config store (npm)npm update check fail…React must be in scope — ReferenceError: React is not defined / 'React' must be in scope when using JSX (React)React must be in scopeprocess.e…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.