2
votes

Les variables d'environnement ne fonctionnent pas (Next.JS 9.4.4)

J'utilise donc l'API Contentful pour obtenir du contenu de mon compte et l'afficher dans mon application Next.Js (j'utilise la prochaine 9.4.4). Très basique ici. Maintenant, pour protéger mes informations d'identification, j'aimerais utiliser des variables d'environnement (je ne l'ai jamais utilisé auparavant et je suis nouveau dans tout cela, donc je suis un peu perdu).

J'utilise ce qui suit pour créer le client Contentful dans mon fichier index.js:

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

MYSPACEID et MYACCESSTOKEN sont MYACCESSTOKEN dur, je voudrais donc les mettre dans un fichier .env pour le protéger et ne pas le rendre public lors du déploiement sur Vercel.

J'ai créé un fichier .env et l' .env rempli comme ceci:

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

function Home(props) {
  return (
    <div>
      <Head>
        <title>My Page</title>
        <link rel="icon" href="/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;

Bien entendu, MYACCESSTOKEN et MYSPACEID contiennent les bonnes clés.

Ensuite, dans mon fichier index.js, je fais ce qui suit:

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

Mais cela ne fonctionne pas lorsque j'utilise yarn dev , j'obtiens l'erreur de console suivante:

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

Voici ma page d'accueil et comment je récupère le contenu de Contentful et le passe comme accessoire à mes composants:

CONTENTFUL_SPACE_ID=MYSPACEID
CONTENTFUL_ACCESS_TOKEN=MYACCESSTOKEN

D'où pensez-vous que mon erreur vient?

Des recherches sur ma question, je l' ai aussi essayé de comprendre comment api fonctionne next.js comme je l' ai lu il pourrait être préférable de créer des demandes de api dans les pages/api/ mais je ne comprends pas comment obtenir le contenu et transmettez la réponse aux composants de mes pages comme je l'ai fait ici.

Toute aide serait très appréciée!

ÉDITER :

J'ai donc corrigé cela en ajoutant mes variables d' next.config.js à mon next.config.js comme ceci:

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

javascript reactjs next.js contentful

0 commentaires

4 Réponses :

-1
votes

Consulter des documents

Vous devez ajouter un fichier next.config.js dans votre projet. Définissez les variables d'environnement dans ce fichier et celles-ci seront disponibles dans votre application.

3 commentaires

Ok donc je sais quelle était mon erreur .. Je l'ai ajouté à mon next.config.js mais je l'ai mal fait .. maintenant ça marche, je vais éditer mon message. Merci!

Il existe un moyen de lire directement le fichier .env dans l'environnement du nœud et du navigateur. Je n'ai pas eu l'occasion d'essayer ça. Il n'était pas pris en charge dans les versions antérieures.

@ Perdixo, c'est une réponse incorrecte car la méthode suggérée expose les informations d'identification. Il ne peut être utilisé que pour les variables qui peuvent être publiées ouvertement.

3
votes

Vous ne pouvez pas faire ce type de demande du côté client sans exposer vos informations d'identification API. Vous devez avoir un backend.

Vous pouvez utiliser Next.js /pages/api pour faire une demande à Contentful, puis la transmettre à votre front-end.

Créez simplement un fichier .env , ajoutez des variables et référencez-le dans votre route API comme suit:

process.env.CONTENTFUL_SPACE_ID

Depuis Next.js 9.4, vous n'avez pas besoin de next.config.js pour cela.

En ajoutant les variables à next.config.js vous avez exposé les secrets côté client. Tout le monde peut voir ces secrets.

Prise en charge de nouvelles variables d'environnement

Créez une application Next.js avec Contentful et déployez-la avec Vercel

Exemple de blog utilisant Next.js et Contentful

0 commentaires

0
votes

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

0 commentaires

0
votes

Ne mettez pas de choses sensibles dans next.config.js mais dans mon cas, j'ai des variables d'environnement qui ne sont pas du tout sensibles et j'en ai besoin aussi bien côté serveur que côté client et vous pouvez alors faire:

// .env file:
VARIABLE_X=XYZ

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

0 commentaires