The Problem

Question

0

212

Views

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

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

//.env.local
MAPBOX_KEY="abc123"

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.

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

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-04T17:51:48.277Z

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

Answer 2 · 2022-07-04T17:51:48.285Z

// Normal Env
   VERY_SECRET
// PUBLIC ENV
   NEXT_PUBLIC_NOT_SO_SECRET

Add NEXT_PUBLIC_ PREFIX

Answer 3 · 2022-07-04T17:51:48.291Z

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} />
  )
}

0

212

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

The Problem

My Attempts

3 answers

0

0

0

Find remote jobs

Andres GPT