Переменные окружения (env)

Начиная с релиза Next.js 9.4 мы предоставили более интуитивный и эргономичный способ добавления переменных окружения. Попробуйте его!

Полезно знать: переменные окружения, указанные таким способом, всегда будут включены в JavaScript-бандл. Добавление префикса NEXT_PUBLIC_ к имени переменной окружения имеет эффект только при их указании через окружение или .env файлы.

Чтобы добавить переменные окружения в JavaScript-бандл, откройте next.config.js и добавьте конфигурацию env:

next.config.js

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

Теперь вы можете обращаться к process.env.customKey в вашем коде. Например:

function Page() {
  return <h1>Значение customKey: {process.env.customKey}</h1>
}

export default Page

Next.js заменит process.env.customKey на 'my-value' во время сборки. Попытка деструктуризации переменных process.env не будет работать из-за особенностей webpack DefinePlugin.

Например, следующая строка:

return <h1>Значение customKey: {process.env.customKey}</h1>

Будет преобразована в:

return <h1>Значение customKey: {'my-value'}</h1>