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

user_10769225 0
Viewed 2112

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

next.js reactjs api environment-variables javascript
3 Answers
user_81083120

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} />
  )
}
user_107692250 
// Normal Env
   VERY_SECRET
// PUBLIC ENV
   NEXT_PUBLIC_NOT_SO_SECRET

Add NEXT_PUBLIC_ PREFIX

user_166262710
Related