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

@cloyd 

Для настройки окружения (environment variables) в Next.js вы можете воспользоваться несколькими подходами. Вот основные шаги:

1. Создание файлов окружения: Next.js поддерживает файлы окружения, которые должны располагаться в корневом каталоге вашего проекта. Общепринятые названия файлов такие: .env — для общих переменных, которые будут использоваться во всех окружениях. .env.local — для локальных переменных, предназначенных только для вашей машины. .env.development — для переменных окружения, используемых в режиме разработки. .env.production — для переменных окружения, используемых в режиме продакшена. .env.test — для переменных окружения, используемых в тестах. Переменные в этих файлах определяются в формате KEY=VALUE.
2. Префиксирование переменных: Следует помнить, что в Next.js переменные окружения должны начинаться с префикса NEXT_PUBLIC_, чтобы они были доступны как на сервере, так и на клиенте. Например: NEXT_PUBLIC_API_URL=https://api.example.com
3. Доступ к переменным: После создания и настройки необходимых переменных вы можете получить доступ к ним в вашем коде через process.env. Например: console.log(process.env.NEXT_PUBLIC_API_URL);
4. Дополнительные настройки в next.config.js: Если вам нужно добавить дополнительные переменные, которые будут доступны только на сервере, вы можете использовать файл next.config.js: module.exports = { env: { CUSTOM_SECRET: 'my-custom-secret', }, }; Этот метод позволяет добавлять переменные, которые не имеют префикса NEXT_PUBLIC_ и будут доступны только на сервере.
5. Защита переменных: Не включайте в файлы, особенно .env, чувствительные данные, такие как API-ключи, без предосторожности. Лучше всего исключить .env.local из системы контроля версий, добавив его в .gitignore.

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