Configuration à l'exécution (Runtime Config)

Avertissement : Cette fonctionnalité est considérée comme obsolète et ne fonctionne pas avec l'Optimisation Statique Automatique, le Traçage des Fichiers de Sortie, ou les Composants Serveur React. Veuillez utiliser plutôt les variables d'environnement pour éviter les surcharges d'initialisation.

Pour ajouter une configuration à l'exécution à votre application, ouvrez next.config.js et ajoutez les configurations publicRuntimeConfig et serverRuntimeConfig :

module.exports = {
  serverRuntimeConfig: {
    // Ne sera disponible que côté serveur
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Transmis via les variables d'environnement
  },
  publicRuntimeConfig: {
    // Sera disponible à la fois côté serveur et client
    staticFolder: '/static',
  },
}

Placez toute configuration réservée au serveur sous serverRuntimeConfig.

Tout ce qui est accessible à la fois au code côté client et serveur doit être sous publicRuntimeConfig.

Une page qui dépend de publicRuntimeConfig doit utiliser getInitialProps ou getServerSideProps, ou votre application doit avoir une Application Personnalisée (Custom App) avec getInitialProps pour désactiver l'Optimisation Statique Automatique. La configuration à l'exécution ne sera pas disponible pour aucune page (ou composant dans une page) sans être rendue côté serveur.

Pour accéder aux configurations à l'exécution dans votre application, utilisez next/config, comme ceci :

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

// Ne contient que serverRuntimeConfig et publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// Ne sera disponible que côté serveur
console.log(serverRuntimeConfig.mySecret)
// Sera disponible à la fois côté serveur et client
console.log(publicRuntimeConfig.staticFolder)

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

export default MyImage