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

Advertencia:

• Esta característica está obsoleta. Recomendamos usar variables de entorno en su lugar, que también pueden soportar valores de tiempo de ejecución.
• Puedes ejecutar código al iniciar el servidor usando la función register.
• Esta característica no funciona con Optimización Estática Automática, Rastreo de Archivos de Salida o Componentes de Servidor React.

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 de tiempo de ejecución exclusiva del servidor bajo serverRuntimeConfig.

Cualquier elemento 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 un App Personalizado 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 de 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