SERVIDOR DE DESARROLLADOR si copio y pego mi token de API directamente en .env

 NEXT_PUBLIC_MAPBOX_API="my-secret-mapbox-gl-api-key"

y usarlo como

 mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API}

y no muestra el mapa y hay un error en las herramientas de desarrollo

 next-dev.js?3515:24 Error: An API access token is required to use Mapbox GL. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes at t.RequestManager._makeAPIURL (mapbox-gl.js?0c80:31:423135) at t.RequestManager.normalizeStyleURL (mapbox-gl.js?0c80:31:420958) at ei.loadURL (mapbox-gl.js?0c80:35:102600) at Map._updateStyle (mapbox-gl.js?0c80:35:458753) at Map.setStyle (mapbox-gl.js?0c80:35:458172) at new Map (mapbox-gl.js?0c80:35:448583) at Mapbox._initialize (mapbox.js?699b:222:1) at new Mapbox (mapbox.js?699b:128:1) at eval (map.js?48e9:61:1)

Traté de ejecutar un servidor de desarrollo nuevamente, no ha ayudado

Uso "siguiente": "12.2.2".

¿mmm? También probé REACT_APP_MAPBOX_ACCESS_TOKEN en lugar de NEXT_PUBLIC y luego, en el componente Map , el accesorio: mapboxAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN} ¡y todavía no ha ayudado! :/

 <Map initialViewState={{ longitude: 21.338631, latitude: 50.102242, zoom: 11, }} style={{ overflow: "hidden", }} mapStyle={mapboxThemeStyle} mapboxAccessToken="my-secret-api-token-without-env-and-it-works" // id="map" tabIndex="-1" > <Marker longitude={21.338631} latitude={50.102242} color="#206ea0" /> </Map>

¡Intenté agregar env a .env.local como NEXT_PUBLIC_MY_MAPBOX_API_TOKEN="pk.xxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxx-xxxxxxxxxx" y funciona! ¡Gracias @Heet Vakharia!

reaccionar-mapa-gl: https://github.com/visgl/react-mapa-gl