title: How to use different .env files with nextjs?
body: <p>I would like to have different configuration files for the environment variables and be able to use them in my next project. I saw the example with <a href="https://github.com/zeit/next.js/tree/canary/examples/with-dotenv" rel="noreferrer">dotenv</a>.</p>
  
  <p>But I don't like to define the variables in the .env file and also define them in the config.next.js file. if for some reason I put the variables in the .env file but forget to put them in the config.next.js file the code starts having problems. 
  Theres is a way to do it more eficiently?</p>
  
  <p><strong>My scripts in package.json:</strong></p>
  
  <pre><code>"scripts": {
      "dev": "next",
      "build": "next build",
      "start": "next start",
      "lint": "eslint pages --ext .ts,.tsx,.js",
      "test": "jest",
      "commit": "git-cz",
      "dev:production": "dotenv next"
  },
  </code></pre>
  
  <p><strong>My .env vars</strong></p>
  
  <pre><code>TITULO=react, typescript, material ui App
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import { NextPage }          from 'next';
  import { FunctionComponent } from 'react';
  
  interface HelloWorldProps {
    nombre: string,
    saludo?: string
  }
  
  
  const HelloWorld: FunctionComponent&lt;HelloWorldProps&gt; = ({ nombre, saludo = 'noches' }: HelloWorldProps) =&gt; (
    &lt;&gt;
      &lt;h1&gt;Hola {nombre} buenas {saludo}&lt;/h1&gt;
      {/* eslint-disable-next-line multiline-ternary */}
      &lt;h2&gt;{process.env.TITULO ? 'hola' : 'adios'}&lt;/h2&gt;
    &lt;/&gt;
  );
  
  const Home: NextPage = () =&gt; &lt;HelloWorld nombre="cristian" /&gt;;
  
  export default Home;
  
  </code></pre>