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

Question

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

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

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

是什么原因导致此问题以及如何解决它？谢谢

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 开箱即用）

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

$> yarn now secret add MyAppName_PRoD_G_KEY AFLkefjlkwblahblahblah

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