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', });
4 Réponses :
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.
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.
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
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, }, };
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, }, }