Переменные среды Nexet.js

Next.js в основном поддерживает переменные среды, поэтому его можно использовать без установки или настройки отдельной библиотеки.

- Загрузить переменные среды с помощью .env.local

— NEXT_PUBLICEОтобразить переменные среды в браузере с помощью префикса

* Что такое переменные среды и зачем их использовать их?

Переменные среды относятся к переменным, которым можно передавать определенные значения (URL-адрес сервера или значения идентификатора других инструментов и т. д.) при выполнении приложения путем создания файла с именем .env. Основная причина его использования — соображения безопасности. Это связано с тем, что если в коде раскрывается определенное значение, то при взломе кода хакерами URL-адрес сервера или определенные значения, которые не установлены в качестве переменных среды, раскрываются вместе, что приводит к большему ущербу.

переменная среды

Источник примера

- Переменные среды

загрузить переменную среды

Файл .env.local обычно устанавливается в корневую папку при установке Next.js и используется для загрузки переменных среды. Вы можете загрузить переменные среды, написавprocess.env. (По умолчанию на большинстве хостинг-сайтов есть страница, на которой отдельно указан env, поэтому не забудьте установить ее и на хостинг-сайте). Поскольку файл .env.local по умолчанию записывается в файл .gitignore, он не загружен в репозиторий git.

.env.local

DB_HOST=localhost

DB_USER=myuser

DB_PASS=мойпароль

Это автоматически загружается в среду Node.js и делает переменныеprocess.env.DB_HOST,process.env.DB_USER иprocess.env.DB_PASS доступными для импорта данных Next.js и маршрутов API.

Например, getStaticProps. Его можно использовать с помощью

// страницы/index.js

экспортируем асинхронную функцию getStaticProps() {

const db = await myDB.connect({

хост: процесс .env.DB_HOST,

имя пользователя:process.env.DB_USER,

пароль:process.env.DB_PASS,

})

// …

}

Примечание. Ниже мы рассмотрим NEXT_PUBLIC, но если вы просто используете Process.env без NEXT_PUBLIC, он не будет работать на клиенте (браузере) (не определено). Обратите внимание, что переменные среды можно использовать без NEXT_PUBLIC только на стороне сервера (getStaticProps, getServerSideProps и т. д.).

Предоставление переменных среды браузеру (клиенту)

По умолчанию переменные среды доступны только в среде Node.js, поэтому они не доступны браузеру.

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

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

Этот процесс.env.NEXT_PUBLIC_ANALYTICS_ID автоматически загружается в среду Node.js, поэтому вы можете использовать его в любом месте своего кода.

// страницы/index.js

импортируем setupAnalyticsService из '../lib/my-analytics-service'

// Здесь можно использовать 'NEXT_PUBLIC_ANALYTICS_ID' в виде префикса by 'NEXT_PUBLIC_'.

// Во время сборки он будет преобразован в `setupAnalyticsService('abcdefghijk')`.

setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)

function HomePage() {

return Hello World



экспортировать домашнюю страницу по умолчанию

Динамические запросы, такие как следующие, не являются встроенными:

// Это НЕ будет встроено, поскольку используется переменная

const varName = 'NEXT_PUBLIC_ANALYTICS_ID'

setupAnalyticsService(process.env)

/ / Это НЕ будет встроено, поскольку используется переменная

const env =process.env

setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)

Переменная среды по умолчанию

Обычно требуется только один файл .env.local. Однако в некоторых случаях вам может потребоваться добавить некоторые значения по умолчанию для среды разработки (следующая разработка) или рабочей среды (следующий запуск).

Next.js по умолчанию принимает .env (все среды), .env.development (среды разработки) и .env.production (среды разработки).

Для .env.local всегда установлено значение по умолчанию, переопределяющее любую другую среду (которая имеет приоритет).

Примечание. Файлы .env, .env.development и .env.production определяют значения по умолчанию, поэтому их необходимо включить в репозиторий. Файлы env*.local должны быть добавлены в ваш .gitignore, и в них вы можете хранить свои секреты.