react-map-gl - 环境变量不传递令牌

Question

DEVELOPER SERVER if I copy and paste my api token directly to .env

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

and use it like

mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API}

and it doesn't render the map and there is an error in dev tools

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)

I tried to run a dev server again it hasn't helped

I use "next": "12.2.2".

hmm? I've also tried REACT_APP_MAPBOX_ACCESS_TOKEN instead of NEXT_PUBLIC then in Map component the prop: mapboxAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN} and it still hasn't helped! :/

     <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>

Tried add env to .env.local like NEXT_PUBLIC_MY_MAPBOX_API_TOKEN="pk.xxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxx-xxxxxxxxxx" and it works! thank you @Heet Vakharia!

react-map-gl: https://github.com/visgl/react-map-gl

Answer 1

According to Next.JS docs for envs in Frontend, you need to add your envs in the .env.local file and All ENVS should start with NEXT_APP_ (which you have already done ) and then don't forget to restart the app in terminal

https://nextjs.org/docs/basic-features/environment-variables