Runtime-Konfiguration

Warnung:

• Diese Funktion ist veraltet. Wir empfehlen stattdessen die Verwendung von Umgebungsvariablen, die auch das Auslesen von Laufzeitwerten 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 Laufzeitkonfiguration 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, // Über Umgebungsvariablen übergeben
  },
  publicRuntimeConfig: {
    // Sowohl auf Server als auch Client verfügbar
    staticFolder: '/static',
  },
}

Platzieren Sie serverseitige Laufzeitkonfigurationen unter serverRuntimeConfig.

Alles, was sowohl für Client- als auch Serverseitigen Code zugänglich sein soll, sollte unter publicRuntimeConfig platziert werden.

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. Laufzeitkonfigurationen sind für keine Seite (oder Komponente in einer Seite) verfügbar, die nicht serverseitig gerendert wird.

Um in Ihrer Anwendung auf die Laufzeitkonfigurationen 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