title: NextJS environment variables aren't working
body: <p>I've been poking around with this for at least an hour and so far I'm stumped. Perhaps I'm not understanding the docs or the medium articles. But, as I understand it NextJS (I have have the latest version installed) provides a built in env variable solution. So, there is no need for the <code>dotenv</code> package.</p>
  <p>Since NextJS is setup all I would need to do is create an <code>env.local</code> to store my API_KEY and other sensitive information. Then, once I save that updated file, I <em>should</em> be able to access <code>${process.env.API_KEY}</code> and have access to that value anywhere in my code.</p>
  <p>Provided the above statements are true, I'm not able to get that to work.</p>
  <p>In my case I'm using environmental variables to connect to Firebase. In the code below it's being implemented. I get a 500 malformed error:</p>
  <pre><code>Connection GRPC stream error. Code: 3 Message: 3 INVALID_ARGUMENT: 
  Project id parakeat-a1-7706, is malformed: it either contains invalid 
  characters or is too long. Look at https://cloud.google.com
  /resource-manager/docs/creating-managing-projects#identifying_projects 
  for instructions in how to get a project's id.
  </code></pre>
  <pre><code>import * as firebase from 'firebase/app';
  import 'firebase/auth';
  import 'firebase/firestore';
  import 'firebase/storage';
  import 'firebase/analytics';
  
  const config = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
    measurementId: process.env.FIREBASE_MEASUREMENT_ID,
  };
  // Initialize Firebase
  try {
    firebase.initializeApp(config);
  } catch (err) {
    // we skip the &quot;already exists&quot; message which is
    // not an actual error when we're hot-reloading
    if (!/already exists/.test(err.message)) {
      console.error('Firebase initialization error', err.stack);
    }
  }
  
  // const firebaseAnalytics = firebase.analytics();
  const firebaseStorage = firebase.storage();
  const firebaseFirestore = firebase.firestore();
  
  export { firebaseStorage, firebaseFirestore };
  </code></pre>
  <p>The ID is correct shown above, so what's wrong? Why is it that if I put the actual value directly in and skip the process.env it successfully connects?</p>