Переменные окружения (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 не сработает из-за особенностей работы DefinePlugin в webpack.

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

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

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

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