title: How to expose an Environment Variable to the front end in Next.js?
body: <h1>The Problem</h1>
  <p>I am trying to pass an environment variable to the front end to display a map from MapBox.</p>
  <h1>My Attempts</h1>
  <ol>
  <li>I have place the API Key into the root of my directory:</li>
  </ol>
  <pre><code>//.env.local
  MAPBOX_KEY=&quot;abc123&quot;
  </code></pre>
  <ol start="2">
  <li>In the front-end, client side, I am trying to load that ENV to render a map:</li>
  </ol>
  <pre class="lang-js prettyprint-override"><code>// components/MapBox.js
  export default function MapBox(){
    const MAPBOX_TOKEN = process.env.MAPBOX_KEY
  
    return (
      &lt;MapGL mapboxApiAccessToken={MAPBOX_TOKEN} /&gt;
    )
  }
  </code></pre>
  <p>The above code does not seem to recgonize the API KEY.</p>
  <ol start="3">
  <li>When I console.log(process.env.MAPBOX_KEY) in this component, I can see the API Key in the terminal while i'm running <code>yarn dev</code></li>
  </ol>
  <p>Is there a way to load this env to the front end?</p>
  <p><em>Note: I am using the <code>react-map-gl</code> package built on top of MapBox</em></p>