Невозможно прочитать переменные среды из проекта Nextjs

Обновлено:

Если вы правильно называете env в файле Dockerfile, но он по-прежнему не работает, вам необходимо установить его ПЕРЕД созданием проекта.


У меня возникли проблемы с настройкой и чтением переменных среды в проекте NextJS.

У меня есть два console logs:

console.info('env', process.env.NODE_ENV);
console.info('backend url', process.env.BACKEND_URL);

Запуск кода без каких-либо действий возвращает то, что я ожидал:

env development
backend url undefined

Экспорт таких переменных:

NODE_ENV=production
BACKEND_URL=url

Не только печатает предыдущие значения, но и отображает следующее сообщение в консоли:

⚠ В вашей среде вы используете нестандартное значение NODE_ENV. Это создает несоответствия в проекте и настоятельно рекомендуется против. Читать далее: https://nextjs.org/docs/messages/non-standard-node-env

Экспортируем вот так:

export NODE_ENV=production
export BACKEND_URL=url

Также печатает то же самое, включая предупреждение.

Запуск NodeJS вот так:

BACKEND_URL=url NODE_ENV=production npm run dev 

Печатает то же самое. echoпри использовании переменных выводятся правильные значения.

Дело не только в console.infos, я пытаюсь использовать эти значения в других частях кода, и они действуют так, как будто эти значения по-прежнему являются development и undefined.

Я также попробовал использовать файл .env:

NODE_ENV=production
BACKEND_URL=url

Я вижу, что оно читается, потому что когда я запускаю сервер NextJS, я вижу следующее:

next dev -p 8080

▲ Next.js 14.1.4
- Local:        http://localhost:8080
- Environments: .env

Если файл не существует, строка с надписью Environment: .env не отображается.

Наконец, я проверил ~/.bashrc и ~/.zshrc, и у них нет упоминаний NODE_ENV или BACKEND_URL.

Что может произойти?

Эй, если вы вызываете переменные env во внешнем интерфейсе, вам нужно добавить к переменным префикс NEXT_PUBLIC_. Дополнительную информацию можно найти здесь — nextjs.org/docs/app/building-your-application/configuring/…

0xKevin 07.05.2024 23:11

Теперь я чувствую себя глупо. Спасибо! Если вы хотите опубликовать это как ответ, я приму это.

Tuma 07.05.2024 23:14

хаха спасибо! Рад слышать, что это может вам помочь!

0xKevin 07.05.2024 23:18
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
3
182
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Если вы вызываете переменные env во внешнем интерфейсе (я так понимаю), вам нужно добавить к переменным префикс NEXT_PUBLIC_.

Дополнительную информацию можно найти в официальном документе здесь — https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser

Вам не нужно экспортировать переменные в файл .env. Вы просто объявляете переменные следующим образом:

NEXT_PUBLIC_NODE_ENV=production
NEXT_PUBLIC_BACKEND_URL=https://nextjs.org/docs/messages/non-standard-node-env

Вам не нужно заключать значение переменной в кавычки, даже если это String.

P.S. В файле .env существует соглашение об именовании переменных: все идентификаторы переменных должны быть в верхнем регистре и иметь префикс "NEXT_PUBLIC_".

Затем вы можете использовать эти переменные в своем коде следующим образом:

...
process.env.NEXT_PUBLIC_BACKEND_URL
...

Самый важный момент: будьте осторожны и не делайте файл .env общедоступным, как обычные файлы.

Другие вопросы по теме