如何在 Next.js 中向前端公开环境变量？

Question

问题

我试图将环境变量传递到前端以显示 MapBox 中的地图。

我的尝试

1. 我已将 API 密钥放入目录的根目录中：

//.env.local
MAPBOX_KEY="abc123"

2. 在前端、客户端，我尝试加载该 ENV 来渲染地图：

//.env.local
MAPBOX_KEY="abc123"

上面的代码似乎没有识别API KEY。

3. 当我在此组件中使用 console.log(process.env.MAPBOX_KEY) 时，我可以在运行时在终端中看到 API 密钥yarn dev

有没有办法将这个环境加载到前端？

注意：我使用的是react-map-gl在 MapBox 之上构建的包

Answer 1

你需要在它前面加上前缀NEXT_PUBLIC_

只有具有该前缀的变量才会在前端公开

例如，NEXT_PUBLIC_HEY对于前端可见，但对于后端均可见。

MAPBOX_KEY="abc123"
NEXT_PUBLIC_HEY="FRONT"

https://nextjs.org/docs/basic-features/environment-variables#exusing-environment-variables-to-the-browser

Answer 2

你必须在 ENV 前面加上NEXT_PUBLIC_in前缀.env.local

//.env.local
NEXT_PUBLIC_MAPBOX_KEY="abc123"

在您的组件中，像这样引用它：

// MapBox.js
export default function MapBox(){
  const MAPBOX_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_KEY

  return (
    <MapGL mapboxApiAccessToken={MAPBOX_TOKEN} />
  )
}