Fix: a setting shows as "undefined" in the browser of your Next.js app (NEXT_PUBLIC_ environment variable, tested repro, Next 16 + React 19.3)

Description and use

In Next.js, an environment variable without the NEXT_PUBLIC_ prefix is not exposed to the browser, causing undefined values. Rename it to NEXT_PUBLIC_BOOKING_URL, update the code, and rebuild the app.

Problem

A setting such as a booking link works on the server but shows up as undefined in the browser, with no error message and a passing build.

Outcome

After renaming the variable to start with NEXT_PUBLIC_ and rebuilding, the browser correctly displays the booking link instead of undefined.

Workflow

• Rename the variable in .env.local and host settings to NEXT_PUBLIC_BOOKING_URL
• Change code to use process.env.NEXT_PUBLIC_BOOKING_URL
• Rebuild the app (npx next build) and redeploy or restart dev server

Evidence

If a setting such as your booking link or API address works on the server but shows up as undefined in the browser, either the variable's name doesn't start with NEXT_PUBLIC_, or you added it after the app was built.

Source

Rename the variable everywhere it is set (.env.local and your host's settings) from BOOKING_URL to NEXT_PUBLIC_BOOKING_URL.

Source

Rebuild and redeploy (locally: stop the server, run npx next build, start again; in dev, stop and restart npm run dev).

Source