环境变量不起作用(Next.JS 9.4.4) [英] Environment variables not working (Next.JS 9.4.4)

问题描述

因此，我正在使用Contentful API从我的帐户中获取一些内容，并将其显示在我的Next.Js应用程序中(我正在使用下一个9.4.4).这里很基础.现在，为了保护我的凭据，我想使用环境变量(我以前从未使用过它，并且我对所有这些都是新手，所以我有点迷失了方向).

我正在使用以下内容在我的index.js文件中创建Contentful Client:

  const client = require('contentful').createClient({空格:"MYSPACEID"，accessToken:"MYACCESSTOKEN"，}); 

MYSPACEID 和 MYACCESSTOKEN 是硬编码的，因此我想将它们放在.env文件中以保护它，并且在Vercel上进行部署时不要将其公开.

我已经创建了一个 .env 文件，并像这样填充它:

  CONTENTFUL_SPACE_ID = MYSPACEIDCONTENTFUL_ACCESS_TOKEN = MYACCESSTOKEN 

当然， MYACCESSTOKEN 和 MYSPACEID 包含右键.

然后在我的index.js文件中，执行以下操作:

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

但是当我使用 yarn dev 时它不起作用，出现以下控制台错误:

  {sys:{类型:错误"，id:未找到"}，消息:找不到资源."，requestId:'c7340a45-a1ef-4171-93de-c606672b65c3'} 

这是我的主页，以及我如何从Contentful检索内容并将其作为道具传递给我的组件:

  const client = require('contentful').createClient({空格:"MYSPACEID"，accessToken:"MYACCESSTOKEN"，});功能Home(道具){返回 (< div><头>< title>我的页面</title>< link rel ="icon" href ="/favicon.ico"/></Head>< main id ="page-home"><模态/>< NavTwo/><英雄item = {props.myEntries [0]}/><页脚/></main></div>);}Home.getInitialProps = async()=>{const myEntries =等待client.getEntries({content_type:"mycontenttype"，});返回 {myEntries:myEntries.items};};导出默认主页； 

您认为我的错误来自哪里?

在研究我的问题时，我还尝试了解了 api 在next.js中的工作方式，因为我读到在 pages/api/中创建api请求可能会更好，但是我不明白如何获取内容，然后像在此一样将响应传递到我的页面组件中.

任何帮助将不胜感激！

因此，我通过将环境变量添加到我的 next.config.js 中来解决此问题，

  const withSass = require('@ zeit/next-sass');module.exports = withSass({webpack(配置，选项){const规则= [{测试:/\.scss $/，使用:[{loader:'sass-loader'}]，}，];返回 {...配置，模块:{... config.module，规则:[... config.module.rules，... rules]}，};}，信封:{CONTENTFUL_SPACE_ID:process.env.CONTENTFUL_SPACE_ID，CONTENTFUL_ACCESS_TOKEN:process.env.CONTENTFUL_ACCESS_TOKEN，}，}); 

解决方案

引用

Where do you think my error comes from?

Researching about my issue, i've also tried to understand how api works in next.js as i've read it could be better to create api requests in pages/api/ but i don't understand how to get the content and then pass the response into my pages components like i did here..

Any help would be much appreciated!

EDIT :

So i've fixed this by adding my env variables to my next.config.js like 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,
  },
});

解决方案

Refer docs

You need to add a next.config.js file in your project. Define env variables in that file and those will be available inside your app.

这篇关于环境变量不起作用(Next.JS 9.4.4)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！