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

Метод 1. Использование пакета dotenv.
Пакет dotenv — популярный выбор для загрузки переменных среды в приложениях Next.js. Вот как это можно настроить:

Шаг 1. Установите пакет dotenv:

npm install dotenv

Шаг 2. Создайте файл .envв корневом каталоге вашего проекта и определите переменные среды:

API_KEY=your_api_key
API_URL=your_api_url

Шаг 3. Импортируйте и настройте dotenvв файле конфигурации Next.js (next.config.js):

require('dotenv').config();
module.exports = {
  // Next.js configuration options
};

Шаг 4. Получите доступ к переменным среды в коде Next.js:

const apiKey = process.env.API_KEY;
const apiUrl = process.env.API_URL;

Метод 2. Использование встроенных переменных среды Next.js.
Next.js предоставляет встроенный способ определения переменных среды через файл next.config.js. Вот как вы можете его использовать:

Шаг 1. Откройте файл конфигурации Next.js (next.config.js) и определите переменные среды:

module.exports = {
  env: {
    API_KEY: 'your_api_key',
    API_URL: 'your_api_url',
  },
};

Шаг 2. Получите доступ к переменным среды в коде Next.js:

const apiKey = process.env.API_KEY;
const apiUrl = process.env.API_URL;

Метод 3: использование бессерверных функций:
Next.js позволяет создавать бессерверные функции, которые могут получать доступ к переменным среды. Вот пример:

Шаг 1. Создайте бессерверную функцию в каталоге pages/api(например, pages/api/data.js):

export default function handler(req, res) {
  const apiKey = process.env.API_KEY;
  const apiUrl = process.env.API_URL;
  // Perform actions using the environment variables
  res.status(200).json({ apiKey, apiUrl });
}

Шаг 2. Получите доступ к конечной точке бессерверной функции в коде Next.js или отправьте к ней HTTP-запрос.

В этой статье мы рассмотрели несколько методов загрузки переменных среды в приложении Next.js. Вы можете выбрать подход, который лучше всего соответствует требованиям вашего проекта и рабочему процессу разработки. Независимо от того, используете ли вы пакет dotenv, встроенные переменные среды Next.js или бессерверные функции, правильное управление переменными среды имеет решающее значение для безопасной и эффективной разработки Next.js.

Не забывайте защищать переменные среды и избегайте передачи конфиденциальной информации в репозиторий. Следуя этим рекомендациям, вы можете быть уверены, что ваши приложения Next.js правильно настроены и готовы к развертыванию.