Введение
При разработке проектов мы используем различные зависимости в нашем приложении. Многие инструменты используют токены/API ключи для предоставления доступа конечным точкам, в случае API авторизованному пользователю. Эти API-ключи являются ценными и не могут быть переданы никому другому в интернете.
Мы используем переменную окружения, чтобы скрыть ключ во время развертывания проекта. Ключ будет храниться на сервере и не будет доступен клиенту.
Сегодня мы узнаем об использовании переменной окружения в приложении NextJS. Если вы любите dotenv, мы реализуем и это.
Итак, давайте приступим.
Использование next.config.js
NextJS предоставляет вам возможность использовать переменную окружения в вашем приложении. Вам нужно определить переменную в файле .env.local в корневой папке.
Создайте файл .env.local для объявления всех ваших переменных окружения.
.env.local
API_KEY = "<Your API KEY>"
Переменная, определенная в .env.local, теперь доступна на стороне сервера. Если вы console.log API_KEY во фронтенде, вы увидите undefined в консоли вашего инструмента разработки.
index.js
console.log(process.env.API_KEY)
Чтобы переменная окружения стала доступна фронтенду, нам нужно настроить файл next.config.js.
.next.config.js
const nextConfig = {
env:{
API_KEY: process.env.API_KEY
}
}
Теперь API_KEY будет доступен во фронтенде, и если вы выполните console.log, то получите значение.
Примечание: Перезапустите сервер, чтобы увидеть изменения.
Использование ‘NEXT_PUBLIC_’
В последней версии nextJS появилась возможность использовать переменные окружения во фронтенде без настройки next.config.js. Вы должны указать префикс переменной в .env.local с NEXT_PUBLIC_.
.env.local.
NEXT_PUBLIC_PASSWORD = "<Your Password>"
Это загрузит переменную во фронтенд с именем NEXT_PUBLIC_PASSWORD. Вы можете получить доступ к значению через process.env.NEXT_PUBLIC_PASSWORD.
index.js.
console.log(process.env.NEXT_PUBLIC_PASSWORD)
Использование библиотеки ‘dotenv’
Если вы используете библиотеку dotenv для загрузки переменной окружения, вы можете легко интегрировать ее в NextJS.
Процесс происходит по той же схеме, что и настройка next.config.js. Установите библиотеку и создайте файл .env в корневом каталоге. Инициализируйте переменную значением, как вы обычно это делаете.
.env.
API_KEY = "<Your API KEY>"
Теперь нам нужно настроить next.config.js. Сначала нам нужно импортировать библиотеку dotenv.
.next.config.js
require("dotenv").config
Теперь нам нужно загрузить переменную во фронтенд, добавив ее в файл.
.next.config.js
const nextConfig = {
env:{
API_KEY: process.env.API_KEY
}
}
Теперь у вас будут переменные окружения во фронтенде.
Заключение
Вы можете использовать любой метод, упомянутый выше, для загрузки переменной окружения. Я предпочитаю загружать переменные с помощью NEXT_PUBLIC_, так как мне не нужно настраивать next.config.js.
Надеюсь, эта статья помогла разобраться в переменных окружения в NextJS. Спасибо за прочтение статьи.