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

Question

我在 Next.js 项目中使用谷歌地图，一切都在本地工作。谷歌地图 key 存储在 next.config.js 中，我通过 process.env.NEXT_PUBLIC_GOOGLEMAPS 在代码中访问它
当我将项目部署到 Vercel 时，出于安全原因，我没有包含 next.js.config。所以我在 Settings -> Environment Variables 下添加了 key

但是，环境变量在生产中不起作用。当我控制台记录 process.env.NEXT_PUBLIC_GOOGLEMAPS 时，我得到未定义
什么可能导致此问题，我该如何解决？谢谢

Answer 1

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

我有一个 env.local本地开发 key 的文件。 添加 .env.local.*到.gitignore 这个文件有我的键/值对，如下所示:

1 NEXT_PUBLIC_G_KEY=AFLkefjlkwblahblahblah

我有一个 next.config.js 文件，它在 env 中也有这个键。空格:

env: { NEXT_PUBLIC_G_KEY: process.env.NEXT_PUBLIC_G_KEY } (process.env works out of the box according to the docs)

我部署到vercel，所以我用 key 的实际值创建了一个 secret ......:

$> yarn now secret add MyAppName_PRoD_G_KEY AFLkefjlkwblahblahblah

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