env

Seit der Veröffentlichung von Next.js 9.4 bieten wir ein intuitiveres und ergonomischeres Erlebnis für das Hinzufügen von Umgebungsvariablen. Probieren Sie es aus!

Wissenswert: Auf diese Weise angegebene Umgebungsvariablen werden immer im JavaScript-Bundle enthalten sein. Das Präfix NEXT_PUBLIC_ vor dem Variablennamen hat nur dann eine Wirkung, wenn die Variablen ü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'. Der Versuch, process.env-Variablen zu destrukturieren, funktioniert aufgrund der Natur des Webpack DefinePlugin nicht.

Die folgende Zeile:

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

Wird letztendlich zu:

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