Javascript 环境变量不工作（Next.JS 9.4.4）_Javascript_Reactjs_Environment Variables_Next.js_Contentful

Javascript 环境变量不工作（Next.JS 9.4.4）

javascript reactjs next.js

Javascript 环境变量不工作（Next.JS 9.4.4）,javascript,reactjs,environment-variables,next.js,contentful,Javascript,Reactjs,Environment Variables,Next.js,Contentful,因此，我使用ContentfulAPI从我的帐户中获取一些内容，并将其显示在我的Next.Js应用程序中（我使用的是Next 9.4.4）。这里非常基本。现在为了保护我的凭证，我想使用环境变量（我以前从未使用过它，而且我对所有这些都是新手，所以我有点迷茫）我使用以下方法在index.js文件中创建Contentful客户端： const client = require('contentful').createClient({ space: 'MYSPACEID', acces

因此，我使用ContentfulAPI从我的帐户中获取一些内容，并将其显示在我的Next.Js应用程序中（我使用的是Next 9.4.4）。这里非常基本。现在为了保护我的凭证，我想使用环境变量（我以前从未使用过它，而且我对所有这些都是新手，所以我有点迷茫）

我使用以下方法在index.js文件中创建Contentful客户端：

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

MYSPACEID

和

MYACCESSTOKEN

都是硬编码的，所以我想把它们放在一个.env文件中以保护它，在Vercel上部署时不要公开

我创建了一个

.env

文件，并按如下方式填充：

CONTENTFUL_SPACE_ID=MYSPACEID
CONTENTFUL_ACCESS_TOKEN=MYACCESSTOKEN

当然，

MYACCESSTOKEN

和

MYSPACEID

包含正确的键

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

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

但当我使用

Thread dev

时，它不起作用，我得到以下控制台错误：

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

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

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;

提及

您需要在项目中添加next.config.js文件。在该文件中定义env变量，这些变量将在应用程序中可用。

如果不公开API凭据，则无法从客户端发出此类请求。你必须有一个后端

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

您可以使用Next.js

/pages/api

向Contentful发出请求，然后将其传递给前端

只需创建一个

.env

文件，添加变量并在API路径中引用它，如下所示：

process.env.CONTENTFUL_SPACE_ID

因为Next.js 9.4，所以不需要Next.config.js

通过将变量添加到

next.config.js

中，您已经向客户端公开了秘密。任何人都可以看到这些秘密

在根目录中创建
.env.development.local
文件。并在此处添加环境变量：

AUTH0_COOKIE_SECRET=eirhg32urrroeroro9344u9832789327432894@@@ NODE_ENV=development AUTH0_NAMESPACE=https:ilmrerino.auth0.com
在应用程序的根目录中创建
next.config.js

const Dotenv = require("dotenv-webpack"); module.exports = { webpack: (config) => { config.resolve.alias["@"] = path.resolve(__dirname); config.plugins.push(new Dotenv({ silent: true })); return config; }, };
但是，服务器将访问这些环境变量。如果要使用任何环境变量，必须再添加一个配置

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

不要将敏感内容放入
next.config.js
但是在我的例子中，我有一些不敏感的环境变量，我需要它们服务器端和客户端，然后你可以做：

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

我建议在nextjs 9.4及更高版本上进行更新，使用以下示例：

.env.local NEXT_PUBLIC_SECRET_KEY=i7z7GeS38r10orTRr1i
在代码的任何部分，您都可以使用：

.js const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEY
请注意，它必须与密钥“NEXT\u PUBLIC\uSECRET\u key”的名称相同，而不仅仅是“SECRET\u key”
当你运行它时，确保日志上写着

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

要了解更多有关环境变量的信息，请参见
Ok，以便我知道我的错误是什么。。我已经将它添加到我的
next.config.js
中，但我做错了。。现在它工作了，我将编辑我的帖子。谢谢有一种方法可以在节点和浏览器环境中直接读取.env文件。我没有机会尝试。早期版本不支持此选项。@Perdixo，这是不正确的答案，因为建议的方法会公开凭据。它只能用于可以公开发布的变量。我的问题与@Perdixo相同，对我来说问题仍然是一样的，如果我将env添加到next.config.js，我会解决问题，因为我真的不知道为什么如果我创建任何类型的.env，结果总是未定义的，我使用的是next v10，我想确保我的凭证不公开。该解决方案适用于旧版本。问题的作者应该接受@NikolaiKiselev的答案。
$ next dev Loaded env from E:\awesome-project\client\.env.local ready - started server on http://localhost:3000 ...