title: Use absolute imports in Next.js app deployed with ZEIT Now
body: <p>In the Next.js 9 tutorial the suggested way to <a href="https://nextjs.org/learn/basics/using-shared-components/using-the-header-component" rel="noreferrer">import shared components</a> is by relative paths, like</p>
  
  <pre class="lang-js prettyprint-override"><code>import Header from '../components/Header';
  </code></pre>
  
  <p>I want to use absolute imports, like</p>
  
  <pre class="lang-js prettyprint-override"><code>import Header from 'components/Header';
  </code></pre>
  
  <p>How do I make this work both locally and when I <a href="https://nextjs.org/learn/basics/deploying-a-nextjs-app" rel="noreferrer">deploy using the Now CLI</a>?</p>
  
  <hr>
  
  <p>Using the suggested setup from the tutorial, my project structure is:</p>
  
  <pre><code>my-project
  ├── components
  ├── pages
  └── package.json
  </code></pre>