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).

Источник