Configuración en tiempo de ejecución (Runtime Config)

Advertencia: Esta característica se considera legado y no funciona con Optimización Estática Automática, Rastreo de Archivos de Salida o Componentes de Servidor de React. Se recomienda usar variables de entorno en su lugar para evitar sobrecarga de inicialización.

Para agregar configuración en tiempo de ejecución a tu aplicación, abre next.config.js y añade las configuraciones publicRuntimeConfig y serverRuntimeConfig:

module.exports = {
  serverRuntimeConfig: {
    // Solo estará disponible en el lado del servidor
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Pasar a través de variables de entorno
  },
  publicRuntimeConfig: {
    // Estará disponible tanto en servidor como en cliente
    staticFolder: '/static',
  },
}

Coloca cualquier configuración exclusiva del servidor bajo serverRuntimeConfig.

Todo lo accesible tanto para código del cliente como del servidor debe estar bajo publicRuntimeConfig.

Una página que dependa de publicRuntimeConfig debe usar getInitialProps o getServerSideProps, o tu aplicación debe tener una App Personalizada con getInitialProps para excluirse de la Optimización Estática Automática. La configuración en tiempo de ejecución no estará disponible para ninguna página (o componente en una página) que no sea renderizada en el servidor.

Para acceder a las configuraciones en tiempo de ejecución en tu aplicación, usa next/config de la siguiente manera:

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

// Solo contiene serverRuntimeConfig y publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// Solo estará disponible en el lado del servidor
console.log(serverRuntimeConfig.mySecret)
// Estará disponible tanto en servidor como en cliente
console.log(publicRuntimeConfig.staticFolder)

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

export default MyImage