Configuración en Tiempo de Ejecución (Runtime Config)

Advertencia:

Esta característica está obsoleta. Se recomienda utilizar variables de entorno en su lugar, que también pueden soportar la lectura de valores en tiempo de ejecución.

Puede 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 su aplicación, abra next.config.js y agregue las configuraciones publicRuntimeConfig y serverRuntimeConfig:

next.config.js

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',
  },
}

Coloque cualquier configuración de tiempo de ejecución exclusiva del servidor bajo serverRuntimeConfig.

Cualquier elemento accesible tanto para el código del cliente como del servidor debe estar bajo publicRuntimeConfig.

Una página que dependa de publicRuntimeConfig debe usar getInitialProps o getServerSideProps, o su 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 de tiempo de ejecución en su aplicación, use 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