Next.js Env Changes Not Showing Up Is Usually What Happens When You Forget Which Variables Are Baked at Build Time and Which Ones Actually Exist at Runtime

Why this issue matters: environment variables in Next.js feel simple until you change one and the app confidently keeps using the old value like it never heard you.

One of the most searched Next.js frustrations is some version of:

1. “I changed .env.local”
2. “I restarted something”
3. “the app still shows the old value”

This usually comes down to not distinguishing:

• variables exposed to the browser
• variables only available on the server
• values captured at build time

The most important rule

Anything exposed to browser-side code usually uses:

NEXT_PUBLIC_

and is often baked into the build output. That means changing the env file without rebuilding or fully restarting the app may not update what the browser gets.

Check where the variable is used

If the variable is referenced in client code:

const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL;

then the browser bundle needs to be rebuilt.

If it is only used server-side:

const secret = process.env.INTERNAL_API_KEY;

then the runtime process is what matters.

Local reset workflow

Stop the dev server completely, then restart:

rm -rf .next
npm run dev

or for production-like testing:

rm -rf .next
npm run build
npm run start

That clears stale build artifacts and makes the distinction easier to see.

Verify the variable is loaded at all

Temporarily log it on the side where it should exist.

Server side:

console.log('API base:', process.env.NEXT_PUBLIC_API_BASE_URL);

If this logs the new value but the browser still shows the old one, your client bundle was probably not rebuilt.

Common deployment mistake

In many platforms, updating .env.local locally does nothing for production. The real value must be set in:

1. hosting platform environment settings
2. container runtime env config
3. CI/CD build environment

If the app is built in CI and deployed later, the build environment may lock in the old NEXT_PUBLIC_ value even if the runtime server has newer secrets.

A useful sanity check

Search for every usage:

rg "NEXT_PUBLIC_API_BASE_URL|INTERNAL_API_KEY" .

That tells you whether the variable is used in:

1. server components
2. route handlers
3. client components
4. build config files

The location often explains the behavior.

Final recommendation

When env changes do not show up in Next.js, stop treating all variables like runtime config. Figure out whether the value is client-exposed or server-only, clear .next, rebuild if needed, and confirm the deployment environment matches what you think you shipped.

Sources

• Next.js environment variables documentation
• Next.js deployment documentation