Umgebungsvariablen funktionieren nicht (Next.JS 9.4.4)

Question 1

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,
  },
});

Question 2

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

Question 3

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,
  },
}

Question 4

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

Question 5

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

dann befolgen Sie diese Schritte:

Ein … kreieren .env.local Datei im Stammverzeichnis des Projekts.

Fügen Sie das Präfix hinzu WEITER_ÖFFENTLICH_ zu allen Ihren Umgebungsvariablen.

eg: NEXT_PUBLIC_SOMETHING=12345

Verwenden Sie sie in jeder JS-Datei wie mit Präfix process.env

eg: process.env.NEXT_PUBLIC_SOMETHING

Question 6

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

Question 7

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.

Question 8

  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,
  },
};