Как настроить окружение (environment variables) в Next.js?

@fred 

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

1. Использование файлов .env

Next.js по умолчанию поддерживает файлы переменных окружения .env. Вы можете создать следующие файлы в корне проекта:

• .env — для всех сред (development и production).
• .env.local — для локальных настроек, которые не должны быть внесены в систему контроля версий.
• .env.development — для среды разработки.
• .env.production — для production-среды.

Например, вы можете добавить следующий файл .env.local:

1
2

DATABASE_URL=http://localhost:5432/mydb
API_KEY=youra*****

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

Чтобы получить доступ к переменным окружения в коде Next.js, вы должны использовать префикс NEXT_PUBLIC_ для переменных, которые вы хотите использовать на стороне клиента. Например:

1

NEXT_PUBLIC_API_URL=https://api.example.com

В коде Next.js вы можете получить доступ к этой переменной следующим образом:

1

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

3. Добавление переменных окружения в runtime

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

1

NEXT_PUBLIC_API_URL=https://api.example.com next dev

4. Использование next.config.js

В next.config.js вы можете также задать некоторые переменные окружения, но это менее распространённый способ, если вам нужно их использовать как в серверной, так и в клиентской части:

1
2
3
4
5

module.exports = {
  env: {
    CUSTOM_KEY: 'value',
  },
};

Однако, хотя это и делает переменную доступной и на сервере, и на клиенте, это не рекомендуется для хранения секретов, так как эти переменные будут встроены в бандл клиента.

Важно:

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

Эти способы позволяют гибко конфигурировать окружение вашего приложения в зависимости от специфики использования.