Runtime-Konfiguration

Warnung: Diese Funktion gilt als veraltet und funktioniert nicht mit Automatischer statischer Optimierung, Output File Tracing oder React Server Components. Bitte verwenden Sie stattdessen Umgebungsvariablen, um Initialisierungs-Overhead zu vermeiden.

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: {
    // Wird nur auf der Server-Seite verfügbar sein
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Über Umgebungsvariablen übergeben
  },
  publicRuntimeConfig: {
    // Wird sowohl auf Server als auch Client verfügbar sein
    staticFolder: '/static',
  },
}

Platzieren Sie alle server-exklusiven Runtime-Konfigurationen unter serverRuntimeConfig.

Alles, was sowohl für Client- als auch Server-seitigen 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. Runtime-Konfigurationen sind für keine Seite (oder Komponente in einer Seite) verfügbar, die nicht server-seitig gerendert wird.

Um auf die Runtime-Konfigurationen in Ihrer Anwendung 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()
// Wird nur auf der Server-Seite verfügbar sein
console.log(serverRuntimeConfig.mySecret)
// Wird sowohl auf Server- als auch Client-Seite verfügbar sein
console.log(publicRuntimeConfig.staticFolder)

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

export default MyImage