所以我使用 Contentful API 从我的帐户中获取一些内容并将其显示在我的 Next.Js 应用程序中(我使用的是 next 9.4.4)。这里非常基本。现在为了保护我的凭据，我想使用环境变量(我以前从未使用过它，而且我对这一切都很陌生，所以我有点迷失了)。
我正在使用以下内容在我的 index.js 文件中创建 Contentful Client:
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 检索内容并将它们作为 Prop 传递给我的组件:
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,
},
});
最佳答案
在不暴露 API 凭据的情况下，您无法从客户端发出此类请求。你必须有一个后端。
您可以使用 Next.js /pages/api向 Contentful 发出请求，然后将其传递给您的前端。
只需创建一个 .env文件，添加变量并在您的 API 路由中引用它，如下所示:
process.env.CONTENTFUL_SPACE_ID
从 Next.js 9.4 开始，您不需要 next.config.js。
通过将变量添加到
next.config.js 你暴露了 secret 到客户端。任何人都可以看到这些 secret 。New Environment Variables Support
Create a Next.js App with Contentful and Deploy It with Vercel
Blog example using Next.js and Contentful
关于javascript - 环境变量不起作用(Next.JS 9.4.4)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62386582/