The Problem

I am trying to pass an environment variable to the front end to display a map from MapBox.

My Attempts

1. I have place the API Key into the root of my directory:

//.env.local
MAPBOX_KEY="abc123"

2. In the front-end, client side, I am trying to load that ENV to render a map:

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

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

The above code does not seem to recgonize the API KEY.

3. When I console.log(process.env.MAPBOX_KEY) in this component, I can see the API Key in the terminal while i'm running yarn dev

Is there a way to load this env to the front end?

Note: I am using the react-map-gl package built on top of MapBox

Solution 1:

You have to prefix your ENV with NEXT_PUBLIC_ in .env.local

//.env.local
NEXT_PUBLIC_MAPBOX_KEY="abc123"

In your component, reference it like this:

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

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

Solution 2:

You need to prefix it with NEXT_PUBLIC_

Only variables with that prefix will be exposed in the frontend

For example NEXT_PUBLIC_HEY will be visible for the frontend but both for the backend.

MAPBOX_KEY="abc123"
NEXT_PUBLIC_HEY="FRONT"

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