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

Основные возможности и принципы работы с переменными окружения в Next.js:

1. Файл .env.local:

   • Используется для хранения чувствительных данных, таких как ключи API, которые не должны быть закоммичены в репозиторий.
   • Этот файл автоматически загружается Next.js.
   • Пример содержимого файла .env.local:

        DB_HOST=localhost
        DB_USER=myuser
        DB_PASS=mypassword

2. Префикс NEXT_PUBLIC_:

   • Переменные окружения, которые должны быть доступны в клиентском коде (браузере), должны иметь префикс NEXT_PUBLIC_.
   • Пример:

        NEXT_PUBLIC_API_URL=https://api.example.com

3. Файлы для разных сред:

   • .env: Значения по умолчанию, применимые ко всем средам.
   • .env.development: Специфичные значения для среды разработки (используется при запуске next dev).
   • .env.production: Специфичные значения для производственной среды (используется при запуске next start).
   • .env.local: Переопределяет значения по умолчанию и имеет наивысший приоритет.

4. Доступ к переменным окружения в коде:

• На сервере:

console.log(process.env.DB_HOST);

• На клиенте:

console.log(process.env.NEXT_PUBLIC_API_URL);

5. Файл next.config.js:

   • Может использоваться для установки переменных окружения по умолчанию или для настройки их значений в зависимости от среды.

   • Пример:

   module.exports = {
      env: {
	      customKey: process.env.customKey,
     },
   };
        

Типы переменных окружения:

• Server: Переменные, которые требуются до запуска приложения (например, ключи API).
• Build: Переменные, используемые во время процесса сборки.
• Client: Переменные, доступные в клиентском коде. Обратите внимание, что здесь не должно быть чувствительной информации.

Настройка переменных окружения:

1. Создание файла .env.local:

    DB_HOST=localhost
    DB_USER=myuser
    DB_PASS=mypassword

2. Доступ к переменным в коде:

    console.log(process.env.DB_HOST);

3. Установка значений по умолчанию:

    const dbHost = process.env.DB_HOST || 'localhost';
    

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

Назад