env

Seit der Veröffentlichung von Next.js 9.4 haben wir jetzt eine intuitivere und ergonomischere Erfahrung für das Hinzufügen von Umgebungsvariablen. Probieren Sie es aus!

Hinweis: Umgebungsvariablen, die auf diese Weise angegeben werden, werden immer in das JavaScript-Bundle aufgenommen. Das Voranstellen von NEXT_PUBLIC_ an den Namen der Umgebungsvariable hat nur dann eine Wirkung, wenn sie über die Umgebung oder .env-Dateien angegeben werden.

Um Umgebungsvariablen zum JavaScript-Bundle hinzuzufügen, öffnen Sie next.config.js und fügen Sie die env-Konfiguration hinzu:

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

Nun können Sie in Ihrem Code auf process.env.customKey zugreifen. Zum Beispiel:

function Page() {
  return <h1>Der Wert von customKey ist: {process.env.customKey}</h1>
}
 
export default Page

Next.js wird process.env.customKey zur Buildzeit durch 'my-value' ersetzen. Das Destrukturieren von process.env-Variablen wird aufgrund der Natur von webpack DefinePlugin nicht funktionieren.

Zum Beispiel wird die folgende Zeile:

return <h1>Der Wert von customKey ist: {process.env.customKey}</h1>

wie folgt enden:

return <h1>Der Wert von customKey ist: {'my-value'}</h1>