Настройка dotenv в Next.js

Существующая установка

Я работал над задачей по внедрению dotenv в наш проект. У нас были все переменные среды в отдельном файле (.env), и мы использовали его для ручного источника перед запуском приложения. Некоторое время это было нормально, но нам нужно было лучшее решение.

Исследовать

Поскольку мы используем Next.js в нашем проекте, я подумал о том, чтобы просто использовать его встроенную функцию для заполнения process.env, но у нее были некоторые ограничения,

  • Файл .env должен находиться в корневом каталоге.
  • Чтобы открыть переменную браузеру, переменная должна иметь префикс «NEXT_PUBLIC».
  • Кроме того, самому .env требовалось ключевое слово «export» или «set» для каждой переменной в зависимости от ОС, что опять же, не то, комфортный.

Это ограничения, потому что некоторые из нас предпочитают хранить наши файлы .env в другом месте, а не в корневом каталоге. А добавление таких префиксов, как «NEXT_PUBLIC», «export» или «set», создает много шума в коде и затрудняет совместное использование с люди, использующие разные операционные системы, такие как Windows и Linux или Mac. Windows требует «установить», а для двух других требуется «экспорт».

Решение

Поэтому мы решили использовать dotenv вместе с Next.js. Вот как это сделать,

Сначала создайте файл .env для своего проекта и сохраните его где-нибудь:

API_HOST=https://exampleapi.com

Поместите переменные среды в файл, по одной в каждой строке.

Затем установите модуль dotenv:

npm install dotenv

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

require('dotenv').config({ path: '/full/custom/path/to/env' })

Но в случае приложения Next.js нам нужно сделать это в конфигурации Next.js.

Модификации конфигурации Next.js

Next.js предоставляет пару интересных ловушек в next.config.js файле. Один из них - ловушка webpack. Мы можем использовать это, чтобы предоставить переменные среды для webpack, чтобы при создании пакета JavaScript для браузера он мог внести необходимые замены для среды браузера.

Обычно process.env недоступен в браузерах, но Next.js работает как на сервере, так и в браузере. Вот что вам нужно сделать:

В файле конфигурации Next.js import webpack:

const webpack = require('webpack')

Затем импортируйте dotenv и настройте файл .env:

const { parsed: myEnv } = require('dotenv').config({
    path:'/full/custom/path/to/env'
})

Здесь проанализированный объект деструктурируется из dotenv. Обычно это устанавливается в process.env, но теперь его можно передать webpack.EnvironmentPlugin для выполнения замен, например,

module.exports = {
    webpack(config) {
        config.plugins.push(new webpack.EnvironmentPlugin(myEnv))
        return config
    }
}

Теперь в приложении, где бы вы ни использовали process.env.API_HOST, окончательный пакет будет выводиться с фактическим URL-адресом.

Таким образом, вам не нужно добавлять какие-либо префиксы или ключевые слова «export» и «set». Это удобно, когда вы делитесь файлом .env с кем-то, кто использует другую ОС. А поскольку нам не нужно каждый раз получать его вручную, мы могли бы просто поместить файл .env в какую-нибудь папку и забыть о нем.

Примечание. Если файл .env находится в корне проекта, нам не нужно указывать путь.

Надеюсь, вы узнали что-то новое или, может быть, даже решили проблему. Спасибо за чтение, получайте удовольствие!

Вы можете подписаться на меня в Twitter и Instagram. Ждите ваших предложений / комментариев!