Конфигурация времени выполнения (Runtime Config)

Предупреждение: Эта функция считается устаревшей и не работает с Автоматической статической оптимизацией (Automatic Static Optimization), Трассировкой выходных файлов (Output File Tracing) или Серверными компонентами React (React Server Components). Вместо неё рекомендуется использовать переменные окружения (environment variables), чтобы избежать накладных расходов на инициализацию.

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

next.config.js

module.exports = {
  serverRuntimeConfig: {
    // Будет доступно только на стороне сервера
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Передача через переменные окружения
  },
  publicRuntimeConfig: {
    // Будет доступно как на сервере, так и на клиенте
    staticFolder: '/static',
  },
}

Любую конфигурацию, предназначенную только для сервера, размещайте в serverRuntimeConfig.

Всё, что должно быть доступно как на клиенте, так и на сервере, должно находиться в publicRuntimeConfig.

Страница, использующая publicRuntimeConfig, обязана использовать getInitialProps или getServerSideProps, либо ваше приложение должно иметь Кастомное приложение (Custom App) с getInitialProps, чтобы отказаться от Автоматической статической оптимизации (Automatic Static Optimization). Конфигурация времени выполнения не будет доступна ни одной странице (или компоненту на странице), которая не рендерится на стороне сервера.

Для доступа к конфигурации времени выполнения в вашем приложении используйте next/config следующим образом:

import getConfig from 'next/config'
import Image from 'next/image'

// Содержит только serverRuntimeConfig и publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// Будет доступно только на стороне сервера
console.log(serverRuntimeConfig.mySecret)
// Будет доступно как на сервере, так и на клиенте
console.log(publicRuntimeConfig.staticFolder)

function MyImage() {
  return (
    <div>
      <Image
        src={`${publicRuntimeConfig.staticFolder}/logo.png`}
        alt="logo"
        layout="fill"
      />
    </div>
  )
}

export default MyImage