NEXT_PUBLIC_ variable is undefined in production

console.log(process.env.NEXT_PUBLIC_API_URL)  // undefined

GET https://www.example.com/undefined/api/items 404 (Not Found)

Why it happens

Next.js replaces every process.env.NEXT_PUBLIC_... in browser code with the literal value from the environment where next build ran. After the build, the app no longer responds to changes in those variables. Next.js says this directly in its docs.

So the usual causes are: the variable was added after the last build; it is set for Preview or Development but not Production; it's in a .env file that is gitignored, so the build server never saw it; the code reads it dynamically (process.env[name] or const env = process.env), which Next.js does not inline; or one Docker image is built once and promoted to several environments.

Fix it by hand

1. Check the name. It must start with exactly NEXT_PUBLIC_, and the code must spell it the same way.
2. Check the environment. On Vercel, open Settings, then Environment Variables, and make sure Production is ticked for it.
3. Rebuild. Trigger a new production deployment. Vercel applies changed variables only to new deployments, and because this value is baked into the JavaScript, restarting isn't enough.
4. Use the literal form in code.

   // inlined at build time
   const url = process.env.NEXT_PUBLIC_API_URL
   
   // NOT inlined, stays undefined in the browser
   const name = 'NEXT_PUBLIC_API_URL'
   const url2 = process.env[name]

5. One Docker image for several environments? Either build per environment with the right values, or read the value on the server at request time (a Server Component that calls await connection() can read process.env at runtime) and pass it down.

Stop it happening again

• Validate required variables during the build (for example in next.config) and fail the build if one is missing.
• Keep a committed .env.example and compare it with your host's Production variables before deploying.
• Never put a secret behind NEXT_PUBLIC_: anything with that prefix is readable by every visitor.