Vercel next.js 环境变量不起作用

Question

我在 Next.js 项目中使用谷歌地图，一切都在本地运行。谷歌地图密钥存储在 next.config.js 中，我通过 process.env.NEXT_PUBLIC_GOOGLEMAPS 在代码中访问它

当我将项目部署到 Vercel 时，出于安全原因，我没有包含 next.js.config。所以我在“设置”->“环境变量”下添加了该密钥

但是，环境变量在生产中不起作用。当我控制台日志 process.env.NEXT_PUBLIC_GOOGLEMAPS 时，我得到未定义

什么可能导致此问题以及如何解决它？谢谢

Answer 1

这就是我的设置工作的方式...

1. 我有一个用于本地开发密钥的

   env.local

   文件。 将

   .env.local.*

   添加到 .gitignore 这个文件有我的键/值对，如下所示：

1   NEXT_PUBLIC_G_KEY=AFLkefjlkwblahblahblah

2. 我有一个 next.config.js 文件，该文件在

   env

   空格中也有此键：

env: {  NEXT_PUBLIC_G_KEY: process.env.NEXT_PUBLIC_G_KEY  }

（process.env 根据 docs 开箱即用）

3. 我部署到 vercel，因此我使用密钥的实际值创建一个秘密...:

$> yarn now secret add MyAppName_PRoD_G_KEY AFLkefjlkwblahblahblah

4. 我进入 vercel > 设置 > 环境变量中的应用程序，并在 UI 中创建一个新的应用程序，映射到我刚刚在命令行中创建的 secret。

Answer 2

对我来说，它只能通过 vercel 接口添加它们才起作用（由于

next.config.js

文件，我受到了一些干扰，但是一旦我将其添加到 .gitignore ，一切就都起作用了）。

Answer 3

如果您限制了可以访问 Google Maps API 的 IP 地址，很可能 Vercel IP 会被 Google 拒绝访问。也许您的 .env 变量有效，但问题是 Google 地图 IP 地址限制。

Answer 4

就我而言，我只需要重新部署应用程序就可以了。

Answer 5

我也遇到过同样的问题。事实证明，Vercel 仅公开以 NEXT_PUBLIC 开头的变量。例如。 NEXT_PUBLIC_PRODUCTION_BE_API。希望这有帮助。