How to expose an Environment Variable to the front end in Next.js?

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"
  1. 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.

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