ENV 处理在 NextJS 和 Mapbox 中不起作用

如何解决ENV 处理在 NextJS 和 Mapbox 中不起作用

快速提问。我正在尝试将 NextJS 与 MapBox 一起使用，并且在使用 Next 处理 env 时遇到了一个奇怪的问题。

所以我有一个带有几个变量的 .env.local 文件：

DATABASE_URL="file:./dev.db"
WP_API_URL=
MAPBox_KEY=

现在，无论何时我将这些变量称为 MapBox 之外的任何其他变量，它们都可以正常工作。但是，如果我尝试在 mapBox 中调用它，如下所示：

export default function Map() {
  const [viewport,setViewport] = useState({
    width: "50%",height: "50%"
  });

  return (
   
        <ReactMapGL
          mapBoxApiAccesstoken={process.env.MAPBox_KEY}
          mapStyle="mapBox://styles/mapBox/outdoors-v11"
          {...viewport}
          onViewportChange={(nextViewport) => setViewport(nextViewport)}
        ></ReactMapGL>
    
  );
}

它不起作用。奇怪的是，如果我在该函数中调用 console.log，它确实会返回 env 的正确字符串，并且不会说未定义。所以我完全不知所措，希望你们中的一些人能提供帮助。我在这里对 SO 进行了一些调查，看到另一个有此错误的人说 dotenv 搞乱了处理，但我没有在这个项目中安装 dotenv (Environment variable not working with Mapbox token on NextJS)。

谢谢！