next.js-Umgebungsvariablen sind undefiniert (Next.js 10.0.5)

Ich programmiere eine Website mit Next.js und habe versucht, Google Tag Manager hinzuzufügen.
Ich habe das Tutorial zum Next.js-Github-Beispiel befolgt, kann aber aus bestimmten Gründen nicht auf meine Umgebungsvariablen zugreifen.
Es heißt, meine Variable sei undefiniert.
Ich habe in meinem Projektordner eine Datei .env.local erstellt (auf derselben Ebene wie Komponenten, Knotenmodule, Seiten usw.).
In dieser Datei habe ich eine Variable wie diese erstellt (Testzweck):

NEXT_PUBLIC_DB_HOST=localhost

Und auf meiner Indexseite habe ich diesen Code ausprobiert:

console.log("test ", process.env.NEXT_PUBLIC_DB_HOST);

Aber in meiner Konsole erhalte ich eine „Test undefiniert“.
Ich habe stattdessen erfolglos versucht, meine Variable in eine .env-Datei einzufügen.
Was mache ich falsch?

Diese Umgebung funktioniert nur auf der Serverseite. Um clientseitig auf diese Umgebung zuzugreifen, müssen Sie sie in next.config.js deklarieren

Hier entlang:

module.exports = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.BASE_URL,
  }
}

1. Erstellen .env (alle Umgebungen), .env.development (Entwicklungsumgebung) und .env.produktion (Produktionsumfeld).

2. Fügen Sie allen Ihren Umgebungsvariablen das Präfix NEXT_PUBLIC hinzu.

NEXT_PUBLIC_API_URL=http://localhost:3000/

3. Mit dem Präfix „process.env“ verwenden

process.env.NEXT_PUBLIC_API_URL

4. Stoppen Sie den Server und starten Sie ihn neu:

npm run dev

5. Ich hoffe es klappt. Diese Lösung für die neueste Version von nextJs (über 9)

Für diejenigen, die NextJS +9 verwenden und im Browser nach Umgebungsvariablen suchen, sollten Sie die verwenden NEXT_PUBLIC_ Präfix. Beispiel:

NEXT_PUBLIC_ANALYTICS_ID=123456789

Sehen Dokumentation als Referenz.

Der Neustart des Servers hat bei mir funktioniert.

1. Bearbeiten und speichern Sie .env.local
2. Stoppen Sie den Server und starten Sie ihn neu. npm run dev
3. In der nächsten Zeile sollten Sie eine Ausgabe wie diese erhalten:

> k[email protected] dev
> next dev

Loaded env from [path]/.env.local

Nachdem ich unzählige Stunden damit verbracht hatte, stellte ich fest, dass es sowohl in der Pre- als auch in der Post-Nextjs-9.4-Dokumentation einen winzigen kleinen Absatz gibt:

• (Vor 9.4) https://nextjs.org/docs/api-reference/next.config.js/environment-variables (dasselbe wie diese Antwort)
  

  Next.js ersetzt „process.env.customKey“ durch „my-value“. Bauzeit.

• (^9.4) https://nextjs.org/docs/basic-features/environment-variables
  

  Um nur serverbezogene Geheimnisse zu schützen, ersetzt Next.js „process.env.*“ durch die korrekten Werte unter Bauzeit.

Schlüsselwörter sind BAUZEIT. Dies bedeutet, dass Sie diese Variablen beim Ausführen festgelegt haben müssen next build und nicht (nur) bei next start damit die Clientseite auf diese Variablen zugreifen kann.

Dies ist meine next.config.js-Datei.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.NEXT_PUBLIC_SITE_URL,
  },
};

module.exports = nextConfig;

Starten Sie den Server neu und es hat gut funktioniert. Verwendung von Nextjs 12.1.0 mit Typoskript

Hinzufügen mit der neuesten Version von Dokumentation dazu v12+.

Mithilfe der Datei next.config.js können Sie Server- und Clientvariablen angeben:

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
}

Sie können weiterhin eine env.local-Datei verwenden und die Variable an die Datei next.config.js übergeben. Zum Beispiel:

 publicRuntimeConfig: {
   DB_URL: process.env.DB_URL
 }

Und dann können Sie wie folgt auf die Variable zugreifen:

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
publicRuntimeConfig.DB_URL;