title: multiple environment variable in next.js
body: <p>I am currently learning to use next.js in my project which is based on 'create-react-app'. I am getting trouble on setting environment variables as <code>.env.development</code>, <code>.env.staging</code> and <code>.env.production</code>. </p>
  
  <p>I have tried two different way. First approach did not work at all and using second approach I can access the environment variables but it creates infinite loop. Here is the setup I tried</p>
  
  <p>First Approach</p>
  
  <pre><code>.env.development
  REACT_APP_API_ENDPOINT=http://localhost:8000
  
  constants/urls.js
  console.log("process env", process.env); // {}
  export const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;
  
  next.config.js
  
  module.exports = withCSS({
    cssModules: true,
  });
  
  module.exports = withPlugins([[withImages]]);
  
  package.json
   "scripts": {
      "dev": "NODE_PATH=. dotenv -e .env.development next",
      "build": "NODE_PATH=. dotenv -e .env.production next build",
      "build:staging": "dotenv -e .env.staging next build",
      "start": "next start"
    },
  </code></pre>
  
  <p>Second Approach</p>
  
  <pre><code>.env.development
   REACT_APP_API_ENDPOINT=http://localhost:8000
  
  constants/urls.js
  console.log("process env", process.env); // {}
  export const API_ENDPOINT = process.env.REACT_APP_API_ENDPOINT;
  
  next.config.js
  const nextRuntimeDotenv = require("next-runtime-dotenv");
  const withConfig = nextRuntimeDotenv({});
  
  const nextConfig = {
    poweredByHeader: false,
    serverRuntimeConfig: {
      NODE_ENV: process.env.NODE_ENV,
    },
    publicRuntimeConfig: {
      NODE_ENV: process.env.NODE_ENV,
      API_ENDPOINT: process.env.REACT_APP_API_ENDPOINT || "http://localhost:3000",
    },
  };
  
  // the reason behind using multiple module.exports is that when wrapping withCss inside
  // withPlugins, the css did not work. It instead gives warning that css is disabled
  
  module.exports = withCSS({
    cssModules: true,
  });
  
  module.exports = withConfig(withPlugins([[withImages]], nextConfig));
  </code></pre>
  
  <p>This approach creates infinite loop.</p>