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

Предупреждение:

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

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

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