为什么在 next.js 中使用硬编码的 api-key 获取数据但不能使用环境变量？答案

【问题标题】：Why is fetching data in next.js with hardcoded api-key working but not with environment variable?为什么在 next.js 中使用硬编码的 api-key 获取数据但不能使用环境变量？
【发布时间】：2020-12-18 16:35:36
【问题描述】：

我遵循 Next.js 的文档，所以我创建了一个名为 .env.local 的文件并将我的 API 密钥存储在其中。

当 console.logging 该键时，它会显示在服务器控制台中，而不是浏览器控制台中。到目前为止，我明白这一点。

问题：我想从给定的 URL 中获取一些数据。在不将我的 API_KEY 提供给浏览器的情况下，我如何才能完成这项工作？

我认为这个话题对于初学者（就像我一样）来说非常令人困惑，如果有人能从中解开困惑，我和其他许多人（所以我认为）会非常高兴。

这是我的代码：（如果我在 URL 中硬编码我的 API_KEY，它就可以正常工作）

import Haversine from '../components/Haversine'
import LangLat from '../components/LangLat'
import axios from 'axios'
import { useEffect } from 'react'

const key = process.env.API_KEY

const index = () => {
  console.log(key)

  const getLangLat = async () => {
    try {
      const response = await axios.get(
        `https://geocode.search.hereapi.com/v1/geocode?q=wimpfener str 40 backnang&apiKey=${key}`
      )
      console.log(response.data)
    } catch (err) {
      console.error(err.message)
    }
  }
  useEffect(() => {
    getLangLat()
  })
  return (
    <div>
      <Haversine />
      <LangLat />
    </div>
  )
}

export default index

【问题讨论】：

标签： reactjs fetch next.js

【解决方案1】：

您需要将 NEXT_PUBLIC_ 添加到环境变量的开头，以便您可以在客户端访问它。

所以在您的 .env.local 更改中

API_KEY 到 NEXT_PUBLIC_API_KEY 并在您的代码中执行相同操作。

https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables

【讨论】：

并且密钥变得可供用户从浏览器读取，不幸的是，别无选择。但是您可以在 Google 控制台中将您的密钥限制为您的主机/域。
是的，当您从客户端调用 API 时，问题是您需要公开提供您的密钥。还有其他解决方案，例如在 nextjs (nextjs.org/docs/basic-features/data-fetching) 内进行服务器端渲染或将调用转移到自己的 API。
感谢@SirCodesAlot 的回答。这是否可以通过 next.js 的“API 路由”功能“将您的调用转移到您自己的 API”？我还使用了“getServerSideProps”并且它可以工作，但是当我想更新 API URL 内的查询时，我无法更新它，因为 getServerSide 道具只提供初始道具...
我的解决方案：按照@SirCodesAlot 的建议，使用 HERE 和 NEXT_PUBLIC_ 提供的“域白名单”。谢谢?