Configuration à l'exécution (Runtime Config)

Avertissement :

• Cette fonctionnalité est obsolète. Nous recommandons d'utiliser plutôt les variables d'environnement, qui peuvent également prendre en charge la lecture de valeurs à l'exécution.
• Vous pouvez exécuter du code au démarrage du serveur en utilisant la fonction register.
• Cette fonctionnalité ne fonctionne pas avec l'Optimisation statique automatique (Automatic Static Optimization), le Traçage des fichiers de sortie (Output File Tracing) ou les Composants serveur React (React Server Components).

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 spécifique 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 (Automatic Static Optimization). 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