Configuration à l'exécution (Runtime Config)

Avertissement :

• Cette fonctionnalité est dépréciée. 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, le Traçage des Fichiers de Sortie, ou les Composants Serveur React.

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, // Transmet 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 App Personnalisée avec getInitialProps pour se désengager de 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'

// Contient uniquement 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