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)

说明与用途

在 Next.js 中，未以 NEXT_PUBLIC_ 前缀命名的环境变量不会暴露给浏览器，导致 undefined。将其重命名为 NEXT_PUBLIC_BOOKING_URL，更新代码并重新构建应用。

问题

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.

结果

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

工作流

• 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

证据

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.

来源

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

来源

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

来源