Laufzeitkonfiguration

Achtung:

• Diese Funktion ist veraltet. Wir empfehlen stattdessen Umgebungsvariablen zu verwenden, die auch das Auslesen von Laufzeitwerten unterstützen.
• Sie können Code beim Server-Start mit der register Funktion ausführen.
• Diese Funktion funktioniert nicht mit Automatischer statischer Optimierung, Ausgabedateiverfolgung oder React-Serverkomponenten.

Um Ihrer App eine Laufzeitkonfiguration 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: {
    // Auf Server- und Clientseite verfügbar
    staticFolder: '/static',
  },
}

Platzieren Sie alle serverseitigen Laufzeitkonfigurationen unter serverRuntimeConfig.

Alles, was sowohl auf Client- als auch auf Serverseite zugänglich sein soll, sollte unter publicRuntimeConfig stehen.

Eine Seite, die sich auf publicRuntimeConfig stützt, muss getInitialProps oder getServerSideProps verwenden, oder Ihre Anwendung muss eine Benutzerdefinierte App mit getInitialProps haben, um sich von der Automatischen statischen Optimierung abzumelden. Die Laufzeitkonfiguration ist für keine Seite (oder Komponente auf einer Seite) verfügbar, die nicht serverseitig gerendert wird.

Um auf die Laufzeitkonfigurationen in Ihrer App 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)
// Auf Server- und 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