title: Environment variables not working (Next.JS 9.4.4)
body: <p>So i'm using the Contentful API to get some content from my account and display it in my Next.Js app (i'm using next 9.4.4). Very basic here. Now to protect my credentials, i'd like to use environment variables (i've never used it before and i'm new to all of this so i'm a little bit losted). </p>
  
  <p>I'm using the following to create the Contentful Client in my index.js file :</p>
  
  <pre><code>const client = require('contentful').createClient({
      space: 'MYSPACEID',
      accessToken: 'MYACCESSTOKEN',
  });
  </code></pre>
  
  <p><code>MYSPACEID</code> and <code>MYACCESSTOKEN</code> are hardcoded, so i'd like to put them in an .env file to protect it and don't make it public when deploying on Vercel. </p>
  
  <p>I've created a <code>.env</code> file and filled it like this :</p>
  
  <pre><code>CONTENTFUL_SPACE_ID=MYSPACEID
  CONTENTFUL_ACCESS_TOKEN=MYACCESSTOKEN
  </code></pre>
  
  <p>Of course, <code>MYACCESSTOKEN</code> and <code>MYSPACEID</code> contains the right keys.</p>
  
  <p>Then in my index.js file, i do the following : </p>
  
  <pre><code>const client = require('contentful').createClient({
    space: `${process.env.CONTENTFUL_SPACE_ID}`,
    accessToken: `${process.env.CONTENTFUL_ACCESS_TOKEN}`,
  });
  </code></pre>
  
  <p>But it doesn't work when i use <code>yarn dev</code>, i get the following console error :</p>
  
  <pre><code>{
    sys: { type: 'Error', id: 'NotFound' },
    message: 'The resource could not be found.',
    requestId: 'c7340a45-a1ef-4171-93de-c606672b65c3'
  }
  </code></pre>
  
  <p>Here is my Homepage and how i retrieve the content from Contentful and pass them as props to my components :</p>
  
  <pre><code>const client = require('contentful').createClient({
      space: 'MYSPACEID',
      accessToken: 'MYACCESSTOKEN',
  });
  
  function Home(props) {
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;My Page&lt;/title&gt;
          &lt;link rel="icon" href="/favicon.ico" /&gt;
        &lt;/Head&gt;
  
        &lt;main id="page-home"&gt;
          &lt;Modal /&gt;
          &lt;NavTwo /&gt;
          &lt;Hero item={props.myEntries[0]} /&gt;
          &lt;Footer /&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    );
  }
  
  Home.getInitialProps = async () =&gt; {
    const myEntries = await client.getEntries({
      content_type: 'mycontenttype',
    });
  
    return {
      myEntries: myEntries.items
    };
  };
  
  export default Home;
  </code></pre>
  
  <p>Where do you think my error comes from? </p>
  
  <p>Researching about my issue, i've also tried to understand how <code>api</code> works in next.js as i've read it could be better to create api requests in <code>pages/api/</code> but i don't understand how to get the content and then pass the response into my pages components like i did here..</p>
  
  <p>Any help would be much appreciated!</p>
  
  <p><strong>EDIT :</strong> </p>
  
  <p>So i've fixed this by adding my env variables to my <code>next.config.js</code> like so :</p>
  
  <pre><code>const withSass = require('@zeit/next-sass');
  
  module.exports = withSass({
    webpack(config, options) {
      const rules = [
        {
          test: /\.scss$/,
          use: [{ loader: 'sass-loader' }],
        },
      ];
  
      return {
        ...config,
        module: { ...config.module, rules: [...config.module.rules, ...rules] },
      };
    },
    env: {
      CONTENTFUL_SPACE_ID: process.env.CONTENTFUL_SPACE_ID,
      CONTENTFUL_ACCESS_TOKEN: process.env.CONTENTFUL_ACCESS_TOKEN,
    },
  });
  
  </code></pre>