javascript - 如何在 getInitialProps 中隐藏 api key

Question

我尝试将我的 api 客户端与 next.js 连接，这是我在 index.js 中的代码的一部分

const searchHandler = async(event) => {
const (value === '')return;
Router.push({
pathname: '/zdjatka',
query: {value: 'kotek'}});};

如你所见，我有一些查询参数。触发处理程序后，网站将路由到我的 zdjatka.js，代码如下，

Test.getInitialProps = async (context) => {
  const { value } = await context.query
const res = await fetch(`https://stock.adobe.io/Rest/Media/1/Search/Files?locale=pl_PL&search_parameters[words]=${value}
    &search_parameters[limit]=22&search_parameters[offset]=22`, {
          headers: {
            "x-api-key": "....",
            "X-Product": "adobe-api/0.1.0",
            "Content-Type": "application/json"
          }
        })
    const data = await res.json()
    // console.log(photos); 
  return {
data: data
  }
}

问题是当我切换到 zdjatka 路由页面时，api 发送请求，并且 chrome 工具在 header 中显示我的 api-key，但是当我直接从网络浏览器 localhost:3000/zdjatka 打开时，没有来自索引页面的链接，我收到带有数据的重新请求，但 header 中不包含 api-key。与路由器连接时如何达到同样的效果？

Answer 1

您需要添加一个next.config.js，并将其添加到其中:

module.exports = {
  env: {
   apiKey: 'your-api-key',
  },
}

然后在 getInitialProps 中，您可以将 API key 引用为 process.env.apiKey