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

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

• Эта функция устарела. Рекомендуем использовать переменные окружения, которые также поддерживают чтение значений во время выполнения.
• Вы можете выполнять код при запуске сервера с помощью register функции.
• Эта функция не работает с Автоматической статической оптимизацией (Automatic Static Optimization), Трассировкой выходных файлов (Output File Tracing) или 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