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

**Code:** `process.env.X is undefined in the browser (NEXT_PUBLIC_)` · **Category:** Next.js · **Seen on:** Next.js, JavaScript

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

## 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?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/nextjs/public-env-variable-undefined-client)