title: Next.js - webpack aliasing component folders doesn't work
body: <p>I am extending next.js webpack configuration as suggested in docs.</p>
  
  <pre><code>const path = require('path')
  
  module.exports = {
    webpack: (config, { dev }) =&gt; {
      config.resolve = {
        alias: {
          Templates: path.resolve(__dirname, 'templates/'),
          Components: path.resolve(__dirname, 'components/')
        }
      }
      return config
    }
  }
  </code></pre>
  
  <p>I want to make my imports to work like this:</p>
  
  <pre><code>import Template from 'Templates/Base'
  import Input from 'Components/Input'
  </code></pre>
  
  <p>What have I done wrong in configuration because I am getting errors such as: </p>
  
  <blockquote>
    <p>Cannot find module 'Components/Header'</p>
  </blockquote>
  
  <p>I am structuring my directory like this:</p>
  
  <pre><code>.next
  .storybook
  components
  |_ Header
  |__ index.js
  |_ Input
  |__ index.js
  templates
  |_ Base
  |__ index.js
  pages
  |_ index.js
  node_modules
  containers
  stories
  ...
  </code></pre>