Umgebungsvariablen funktionieren nicht (Next.JS 9.4.4)

Lesezeit: 6 Minuten

Benutzer-Avatar
Perdixo

Also verwende ich die Contentful-API, um Inhalte von meinem Konto abzurufen und sie in meiner Next.Js-App anzuzeigen (ich verwende Next 9.4.4). Sehr einfach hier. Um meine Anmeldeinformationen zu schützen, möchte ich Umgebungsvariablen verwenden (ich habe sie noch nie zuvor verwendet und ich bin neu in all dem, also bin ich ein bisschen verloren).

Ich verwende Folgendes, um den Contentful Client in meiner index.js-Datei zu erstellen:

const client = require('contentful').createClient({
    space: 'MYSPACEID',
    accessToken: 'MYACCESSTOKEN',
});

MYSPACEID und MYACCESSTOKEN sind fest codiert, daher möchte ich sie in eine .env-Datei einfügen, um sie zu schützen, und sie nicht öffentlich machen, wenn sie auf Vercel bereitgestellt werden.

Ich habe eine erstellt .env Datei und fülle sie so aus:

CONTENTFUL_SPACE_ID=MYSPACEID
CONTENTFUL_ACCESS_TOKEN=MYACCESSTOKEN

Na sicher, MYACCESSTOKEN und MYSPACEID enthält die richtigen Schlüssel.

Dann mache ich in meiner index.js-Datei Folgendes:

const client = require('contentful').createClient({
  space: `${process.env.CONTENTFUL_SPACE_ID}`,
  accessToken: `${process.env.CONTENTFUL_ACCESS_TOKEN}`,
});

Aber es funktioniert nicht, wenn ich es benutze yarn deverhalte ich folgenden Konsolenfehler:

{
  sys: { type: 'Error', id: 'NotFound' },
  message: 'The resource could not be found.',
  requestId: 'c7340a45-a1ef-4171-93de-c606672b65c3'
}

Hier ist meine Homepage und wie ich den Inhalt von Contentful abrufe und als Requisiten an meine Komponenten übergebe:

const client = require('contentful').createClient({
    space: 'MYSPACEID',
    accessToken: 'MYACCESSTOKEN',
});

function Home(props) {
  return (
    <div>
      <Head>
        <title>My Page</title>
        <link rel="icon" href="https://stackoverflow.com/favicon.ico" />
      </Head>

      <main id="page-home">
        <Modal />
        <NavTwo />
        <Hero item={props.myEntries[0]} />
        <Footer />
      </main>
    </div>
  );
}

Home.getInitialProps = async () => {
  const myEntries = await client.getEntries({
    content_type: 'mycontenttype',
  });

  return {
    myEntries: myEntries.items
  };
};

export default Home;

Woher glaubst du, kommt mein Fehler?

Bei der Recherche zu meinem Problem habe ich auch versucht zu verstehen, wie api funktioniert in next.js, wie ich gelesen habe, könnte es besser sein, API-Anforderungen in zu erstellen pages/api/ Aber ich verstehe nicht, wie ich den Inhalt abrufen und dann die Antwort an meine Seitenkomponenten weitergeben soll, wie ich es hier getan habe.

Jede Hilfe wäre sehr willkommen!

BEARBEITEN :

Also habe ich das behoben, indem ich meine env-Variablen zu meiner hinzugefügt habe next.config.js so:

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  webpack(config, options) {
    const rules = [
      {
        test: /\.scss$/,
        use: [{ loader: 'sass-loader' }],
      },
    ];

    return {
      ...config,
      module: { ...config.module, rules: [...config.module.rules, ...rules] },
    };
  },
  env: {
    CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID,
    CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN,
  },
});

  • Ich kann .env.local-Variablen in getServerSideProps() mit process.env.VARIABLE_NAME abrufen, kann sie jedoch nicht abrufen, wenn ich das Formular auf der Clientseite absende

    – Tiefes Kakkar

    22. Oktober 2021 um 6:16 Uhr

Sie können diese Art von Anfrage nicht clientseitig stellen, ohne Ihre API-Anmeldeinformationen preiszugeben. Sie müssen ein Backend haben.

Sie können Next.js verwenden /pages/api um eine Anfrage an Contentful zu stellen und diese dann an Ihr Front-End weiterzuleiten.

Erstellen Sie einfach eine .env Datei, fügen Sie Variablen hinzu und verweisen Sie wie folgt in Ihrer API-Route darauf:

process.env.CONTENTFUL_SPACE_ID

Seit Next.js 9.4 braucht man dafür next.config.js nicht mehr.


Durch Hinzufügen der Variablen zu next.config.js du hast die Geheimnisse gelüftet zur Client-Seite. Jeder kann diese Geheimnisse sehen.

Unterstützung für neue Umgebungsvariablen

Erstellen Sie eine Next.js-App mit Contentful und stellen Sie sie mit Vercel bereit

Blog-Beispiel mit Next.js und Contentful

Nicht empfindliche Sachen reinstecken next.config.js jedoch In meinem Fall habe ich einige env-Variablen, die überhaupt nicht sensibel sind, und ich brauche sie sowohl serverseitig als auch clientseitig, und dann können Sie Folgendes tun:

// .env file:
VARIABLE_X=XYZ

// next.config.js
module.exports = {
  env: {
    VARIABLE_X: process.env.VARIABLE_X,
  },
}

Benutzer-Avatar
D4ITON

Ich habe empfohlen, bei nextjs 9.4 und höher zu aktualisieren, verwenden Sie dieses Beispiel:

.env.local
NEXT_PUBLIC_SECRET_KEY=i7z7GeS38r10orTRr1i

und in jedem Teil Ihres Codes könnten Sie Folgendes verwenden:

.js
const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEY

Beachten Sie, dass es derselbe Name des Schlüssels sein muss “WEITER_ÖFFENTLICH_ SECRET_KEY” und nicht nur “SECRET_KEY”

und wenn Sie es ausführen, stellen Sie sicher, dass im Protokoll steht

$ next dev
Loaded env from E:\awesome-project\client\.env.local
ready - started server on http://localhost:3000
...

Weitere Informationen zu Umgebungsvariablen finden Sie unter dieser Link

  • Ist dies erforderlich, um NEXT_PUBLIC zu verwenden?

    – Tiefes Kakkar

    22. Oktober 2021 um 6:11 Uhr

  • Beachten Sie, dass dieser Ansatz schützt nicht Ihre Geheimnisse – sie sind für jeden im Frontend-Paket sichtbar. Um Ihre Geheimnisse zu schützen muss Erstellen Sie eine Backend-Funktion, wie Nikolai Kiselev bereits in seiner Antwort vorgeschlagen hat. .env-Dateien können dann aber zum Speichern von Geheimnissen verwendet werden noch nie Stellen Sie ihnen “NEXT_PUBLIC_” voran, da dies sie auch für das Frontend sichtbar macht. Ohne das Präfix “NEXT_PUBLIC_” ist die Variable nur im next.js-Backend verfügbar, was Sie möchten.

    – Ronkot

    25. Januar um 12:58 Uhr


Benutzer-Avatar
verwirrt_

wenn Sie die neueste Version von nextJs verwenden (über 9)

dann befolgen Sie diese Schritte:

  1. Ein … kreieren .env.local Datei im Stammverzeichnis des Projekts.
  1. Fügen Sie das Präfix hinzu WEITER_ÖFFENTLICH_ zu allen Ihren Umgebungsvariablen.
eg: NEXT_PUBLIC_SOMETHING=12345
  1. Verwenden Sie sie in jeder JS-Datei wie mit Präfix process.env
eg: process.env.NEXT_PUBLIC_SOMETHING

Sie müssen eine einfache Änderung in next.config.js vornehmen

const nextConfig = {
  reactStrictMode: true,
  env:{
    MYACCESSTOKEN : process.env.MYACCESSTOKEN,
    MYSPACEID: process.env.MYSPACEID,
  }
}

module.exports = nextConfig

ändere es so

Benutzer-Avatar
Achal Jain

Verweisen Dokumente

Sie müssen Ihrem Projekt eine next.config.js-Datei hinzufügen. Definieren Sie env-Variablen in dieser Datei und diese sind in Ihrer App verfügbar.

Benutzer-Avatar
Yilmaz

  npm i --save [email protected] // version 3.0.0 has a bug

schaffen .env.development.local Datei im Root. und fügen Sie Ihre Umgebungsvariablen hier hinzu:

 [email protected]@@
 NODE_ENV=development
 AUTH0_NAMESPACE=https:ilmrerino.auth0.com 

schaffen next.config.js im Stammverzeichnis Ihrer App.

const Dotenv = require("dotenv-webpack");
module.exports = {
  webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname);
    config.plugins.push(new Dotenv({ silent: true }));
    return config;
  },
};

Auf diese env-Variablen wird jedoch vom Server zugegriffen. Wenn Sie eine der env-Variablen verwenden möchten, müssen Sie eine weitere Konfiguration hinzufügen.

 module.exports = {
  webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname);
    config.plugins.push(new Dotenv({ silent: true }));
    return config;
  },
 env: {
   AUTH0_NAMESPACE: process.env.AUTH0_NAMESPACE,
  },
};

1015160cookie-checkUmgebungsvariablen funktionieren nicht (Next.JS 9.4.4)

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy