[英]Hiding Storyblok API-Key
I'm using Next.js with Storyblok and recently made use of the react-next-boilerplate .我将 Next.js 与 Storyblok 一起使用,并且最近使用了react-next-boilerplate 。
I noticed that they put the preview token in the _app.js
, so essentially publish it:我注意到他们将预览令牌放在了_app.js
中,所以基本上是发布它:
storyblokInit({
accessToken: "your-preview-token",
use: [apiPlugin],
components,
});
If I use an environment variable instead, which isn't available on the client, I get the error如果我改用环境变量,但客户端不可用,则会出现错误
You need to provide an access token to interact with Storyblok API您需要提供访问令牌才能与 Storyblok 进行交互 API
in the client.在客户端。 That's because (I think) my components use StoryblokComponent
, which makes use of the global Storyblok state. So I wonder:那是因为(我认为)我的组件使用StoryblokComponent
,它利用了全局 Storyblok state。所以我想知道:
Should I ignore this error, as I don't plan to interact with the Storyblok API other than using it for component rendering (all the data comes from the server, as far as I understand the concept of static site generation), and component rendering seems to be still working?我应该忽略这个错误吗,因为我不打算与 Storyblok API 交互,除了将它用于组件渲染(所有数据都来自服务器,据我了解 static 网站生成的概念)和组件渲染似乎还在工作?
Should I just publish the preview token?我应该只发布预览令牌吗?
Should I create two tokens, one for the server and one for the client?我应该创建两个令牌,一个用于服务器,一个用于客户端吗?
Setting the token to process.env.STORYBLOK_API_KEY || "NULL"
将令牌设置为process.env.STORYBLOK_API_KEY || "NULL"
process.env.STORYBLOK_API_KEY || "NULL"
(where "NULL"
can be anything except the empty string) also works (no more errors) but seems like a weird solution. process.env.STORYBLOK_API_KEY || "NULL"
(其中"NULL"
可以是空字符串以外的任何内容)也有效(没有更多错误)但似乎是一个奇怪的解决方案。
I don't really understand why they combine these two things, component rendering and data fetching, in the same function.我真的不明白为什么他们在同一个 function 中结合了这两个东西,组件渲染和数据获取。
I would use a .env.local
file and populate it with:我会使用.env.local
文件并填充它:
STORYBLOK_API_KEY=your-preview-token
To use the environment variable inside _app.js
you have to pass it to next.config.js
like this:要在_app.js
中使用环境变量,您必须像这样将它传递给next.config.js
:
module.exports = {
env: {
STORYBLOK_API_KEY: process.env.STORYBLOK_API_KEY,
}
}
Source: https://nextjs.org/docs/basic-features/environment-variables资料来源: https://nextjs.org/docs/basic-features/environment-variables
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.