环境变量不起作用（Next.JS 9.4.4）

Question

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

我使用以下内容在我的 index.js 文件中创建内容客户端：

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

但是当我使用

yarn dev

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

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

这是我的主页以及如何从 Contentful 检索内容并将它们作为 props 传递给我的组件：

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;

你认为我的错误来自哪里？

在研究我的问题时，我还尝试了解

api

在 next.js 中的工作原理，因为我读到在

pages/api/

中创建 API 请求可能会更好，但我不明白如何获取内容和然后将响应传递到我的页面组件中，就像我在这里所做的那样。

任何帮助将不胜感激！

编辑：

所以我通过将环境变量添加到我的

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

Answer 1

如果您使用的是最新版本的nextJs（9以上）

然后按照以下步骤操作：

在项目根目录中创建一个 .env.local 文件。

将前缀 NEXT_PUBLIC_ 添加到所有环境变量中。

eg: NEXT_PUBLIC_SOMETHING=12345

在任何 JS 文件中使用它们，例如带有前缀 process.env

eg: process.env.NEXT_PUBLIC_SOMETHING

Answer 2

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

您可以使用 Next.js

/pages/api

向 Contentful 发出请求，然后将其传递到您的前端。

只需创建一个

.env

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

process.env.CONTENTFUL_SPACE_ID

从 Next.js 9.4 开始，您不再需要 next.config.js。

通过将变量添加到

next.config.js

您已将秘密暴露给客户端。任何人都可以看到这些秘密。

新环境变量支持

使用 Contentful 创建 Next.js 应用程序并使用 Vercel 进行部署

使用 Next.js 和 Contentful 的博客示例

Answer 3

我建议更新nextjs 9.4及更高版本，使用这个例子：

.env.local
NEXT_PUBLIC_SECRET_KEY=i7z7GeS38r10orTRr1i

并且在您可以使用的代码的任何部分：

.js
const SECRET_KEY = process.env.NEXT_PUBLIC_SECRET_KEY

注意，它必须与密钥“NEXT_PUBLIC_ SECRET_KEY”同名，而不仅仅是“SECRET_KEY”

当您运行它时，请确保日志中显示

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

要了解有关环境变量的更多信息，请参阅此链接

Answer 4

您必须在 next.config.js 中进行简单的更改

const nextConfig = {
  reactStrictMode: true,
  env:{
    MYACCESSTOKEN : process.env.MYACCESSTOKEN,
    MYSPACEID: process.env.MYSPACEID,
  }
}

module.exports = nextConfig

改成这样

Answer 5

不要将敏感内容放入

next.config.js

但是在我的情况下，我有一些根本不敏感的环境变量，我需要它们在服务器端和客户端，然后你可以这样做：

// .env file:
VARIABLE_X=XYZ

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

Answer 6

与 9.4.4 无关，但面临同样的 env 未正确加载的问题。

清单：

```
.env.local
```
文件命名
确保
```
.env.local
```
位于根文件夹中。我的是
```
src/.env.local
```
（这是我的问题）。
为
```
客户端
```
环境变量添加前缀NEXT_PUBLIC_。
重新加载环境（热重载不会拾取 .env 文件更改）

另外，请参阅官方文档：https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

Answer 7

对我来说，解决方案只是重新启动本地服务器:)

让我头疼，然后偶然修复了它。

我没有想到服务器启动时会加载环境变量。

Answer 8

  npm i --save [email protected] // version 3.0.0 has a bug

在根目录中创建

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

Answer 9

参考文档

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

Answer 10

您必须在

.env.local

中定义您的秘密，然后在您的

next.config.js

中执行此操作

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  env: {
    VARIABLE_IN_ENV: process.env.VARIABLE_IN_ENV
  }
};

module.exports = nextConfig;

这会起作用。

环境变量不起作用（Next.JS 9.4.4）

问题描述投票：0回答：10

10个回答

最新问题

环境变量不起作用（Next.JS 9.4.4）

问题描述 投票：0回答：10

10个回答

最新问题

问题描述投票：0回答：10