Umgebungsvariablen (env)

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

Wichtig: Auf diese Weise angegebene Umgebungsvariablen werden immer im JavaScript-Bundle enthalten sein. Das Präfix NEXT_PUBLIC_ vor dem 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',
  },
}

Jetzt 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 ersetzt process.env.customKey zur Build-Zeit durch 'my-value'. Aufgrund der Funktionsweise von webpack DefinePlugin funktioniert eine Destrukturierung von process.env-Variablen nicht.

Beispielsweise wird die folgende Zeile:

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

Am Ende zu:

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