Runtime-Konfiguration

Warnung:

• Diese Funktion ist veraltet. Wir empfehlen stattdessen die Verwendung von Umgebungsvariablen, die auch das Auslesen von Runtime-Werten unterstützen.
• Sie können Code beim Serverstart mit der register-Funktion ausführen.
• Diese Funktion funktioniert nicht mit Automatischer Statischer Optimierung, Output File Tracing oder React Server Components.

Um eine Runtime-Konfiguration zu Ihrer Anwendung hinzuzufügen, öffnen Sie next.config.js und fügen Sie die Konfigurationen publicRuntimeConfig und serverRuntimeConfig hinzu:

module.exports = {
  serverRuntimeConfig: {
    // Nur auf der Serverseite verfügbar
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Umgebungsvariablen durchreichen
  },
  publicRuntimeConfig: {
    // Sowohl auf Server als auch Client verfügbar
    staticFolder: '/static',
  },
}

Platzieren Sie serverseitige Runtime-Konfigurationen unter serverRuntimeConfig.

Alles, was sowohl für Client- als auch Serverseitigen Code zugänglich sein soll, gehört unter publicRuntimeConfig.

Eine Seite, die auf publicRuntimeConfig angewiesen ist, muss getInitialProps oder getServerSideProps verwenden oder Ihre Anwendung muss eine Custom App mit getInitialProps haben, um sich von der Automatischen Statischen Optimierung abzumelden. Runtime-Konfigurationen sind für keine Seite (oder Komponente in einer Seite) verfügbar, die nicht serverseitig gerendert wird.

Um in Ihrer Anwendung auf die Runtime-Konfigurationen zuzugreifen, verwenden Sie next/config wie folgt:

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

// Enthält nur serverRuntimeConfig und publicRuntimeConfig
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// Nur auf der Serverseite verfügbar
console.log(serverRuntimeConfig.mySecret)
// Sowohl auf Server- als auch Clientseite verfügbar
console.log(publicRuntimeConfig.staticFolder)

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

export default MyImage