环境变量不适用于 NextJS 上的 Mapbox 令牌答案

【问题标题】：Environment variable not working with Mapbox token on NextJS环境变量不适用于 NextJS 上的 Mapbox 令牌
【发布时间】：2021-01-14 12:33:41
【问题描述】：

我有一个 Mapbox 地图，我试图将环境变量传递给使用 NextJS 9.4 中的内置 .env.local 集成。根据 Next 文档，我使用了一个 .env.local 文件，并且为了将 env 变量公开给浏览器，我在它前面加上了 NEXT_PUBLIC_。但是，此设置不会传递访问令牌。当我直接传递令牌时，它确实有效，所以我知道这是.env.local 文件没有传递特定环境变量的某种问题，即使它与其他令牌一起传递也是如此。

.env.local:

NEXT_PUBLIC_MAPBOX_TOKEN=my_mapbox_access_token
OTHER_API_TOKEN=my_other_api_token

map.js：

// Works
mapboxgl.accessToken = "my_mapbox_access_token";

// Doesn't work
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN;

其他.js：

// Also works
class OtherAPI extends RESTDataSource {
    constructor() {
        super();
        this.baseURL = "https://rest.otherapi.com/";
    }

    willSendRequest(request) {
        request.headers.set(
            "X-Application-Key",
            process.env.OTHER_API_TOKEN
        );
    }...

所以 Mapbox 令牌在直接传递时有效，环境变量在与其他 API 一起使用时有效，但由于某种原因，环境变量不适用于 Mapbox API。我尝试过使用和不使用 NEXT_PUBLIC_ 前缀。我做错了什么？

【问题讨论】：

标签： environment-variables next.js

【解决方案1】：

可能是这样

您正在使用dotenv

请在 GitHub 上查看此讨论： https://github.com/vercel/next.js/discussions/12754

【讨论】：

这似乎已经解决了。谢谢！