Fix an environment variable that is undefined in a Next.js browser bundle

A backend URL works in a server-side script but is undefined in browser code. Adding the value to the deployment dashboard does not change an already built bundle.

Why this happens

Server-only variables are not automatically exposed to browser code. Public variables are bundled according to the framework’s build rules and must never contain secrets.

Step-by-step solution

1. Decide whether the value belongs on the server or is intentionally public. Keep credentials and signing keys in server-side code.

2. For a public configuration value, use the supported public-variable convention and ensure it exists during the build. Restart local development after environment changes.

3. Rebuild and redeploy when a bundled public value changes. Validate the resolved API origin without printing unrelated environment variables.

Worked example

A public API base URL can be exposed; a Cloudinary API secret cannot. Prefer a server-side proxy when the browser should not know upstream credentials.

Verify the fix

Inspect the browser’s actual request URL after a fresh build. Check a production build as well as development, because they may receive configuration at different stages.

Prevent a repeat

Document build-time versus runtime configuration and provide a non-secret example environment file. Never commit a real environment file to fix deployment confusion.

Reference

Official documentation or standards guidance

An original Gistmax troubleshooting guide. Scenarios and sample values are illustrative; configuration depends on your software version and environment. Cover diagram: Gistmax Tutorials.