title: All NextJS pages have almost the same JS bundle size
body: <p>So, I've been working with NextJS for a while now and I never really looked at the build folder nor the info shown in the console when the build succeeds but I did notice something strange the one time I <em>did</em> look at it.</p>
  <p>I have been using TypeScript and wrote a little babel config with TS's config to use absolute paths. So the way I am importing components is by having an absolute path <strong>~/components</strong> which is an alias of <strong>./src/components</strong>. All imports throughout the app are using components imported from <strong>~/components</strong> and there's other absolutes paths in there as well. So, here's what I saw when I built my app</p>
  <p><a href="https://i.stack.imgur.com/YTEFY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YTEFY.png" alt="enter image description here" /></a></p>
  <p>Notice how every single page is almost of the same size? Even the <strong>about</strong> and <strong>404</strong> pages are HUGE. So my guess was that importing modules using the absolute imports is what's causing the issue and because of that, each page is linking to a JS file that has the entire app code in it . I am not exactly sure and I can't seem to find any resources online that can help me optimize these pages. Honestly, I don't even know what part of the app needs to be configured. Whether it's webpack or babel, I have no clue. So, I was hoping to get some help on this and if there's some further configuration that I have to add so each page uses only as much JavaScript as it needs.</p>
  <p>Here's my typescript and babel configs:</p>
  <p>TypeScript</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;lib&quot;: [&quot;dom&quot;, &quot;dom.iterable&quot;, &quot;esnext&quot;],
      &quot;baseUrl&quot;: &quot;./src&quot;,
      &quot;paths&quot;: {
        &quot;~/components&quot;: [&quot;./components&quot;],
        &quot;~/styles&quot;: [&quot;./styles&quot;],
        &quot;~/assets&quot;: [&quot;./assets&quot;],
        &quot;~/types&quot;: [&quot;./types&quot;],
        &quot;~/pages&quot;: [&quot;./pages&quot;],
        &quot;~/utils&quot;: [&quot;./utils&quot;],
        &quot;~/context&quot;: [&quot;./context&quot;],
        &quot;~/data&quot;: [&quot;./data&quot;],
        &quot;~/services&quot;: [&quot;./services&quot;]
      },
      &quot;allowJs&quot;: false,
      &quot;strict&quot;: true,
      &quot;forceConsistentCasingInFileNames&quot;: true,
      &quot;noEmit&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;isolatedModules&quot;: true,
      &quot;target&quot;: &quot;ESNext&quot;,
      &quot;jsx&quot;: &quot;preserve&quot;,
      &quot;experimentalDecorators&quot;: true,
      &quot;emitDecoratorMetadata&quot;: true,
      &quot;skipLibCheck&quot;: true,
      &quot;noImplicitThis&quot;: true,
      &quot;noImplicitReturns&quot;: true,
      &quot;noUnusedLocals&quot;: true,
      &quot;noUnusedParameters&quot;: true,
      &quot;noImplicitAny&quot;: true
    },
    &quot;exclude&quot;: [&quot;node_modules&quot;],
    &quot;include&quot;: [&quot;next-env.d.ts&quot;, &quot;**/*.ts&quot;, &quot;**/*.tsx&quot;]
  }
  
  </code></pre>
  <p>Babel</p>
  <pre><code>{
    &quot;presets&quot;: [&quot;next/babel&quot;],
    &quot;plugins&quot;: [
      [&quot;styled-components&quot;, { &quot;ssr&quot;: true }],
      [
        &quot;module-resolver&quot;,
        {
          &quot;alias&quot;: {
            &quot;~/components&quot;: &quot;./src/components&quot;,
            &quot;~/styles&quot;: &quot;./src/styles&quot;,
            &quot;~/types&quot;: &quot;./src/types&quot;,
            &quot;~/pages&quot;: &quot;./src/pages&quot;,
            &quot;~/assets&quot;: &quot;./src/assets&quot;,
            &quot;~/utils&quot;: &quot;./src/utils&quot;,
            &quot;~/context&quot;: &quot;./src/context&quot;,
            &quot;~/data&quot;: &quot;./src/data&quot;,
            &quot;~/services&quot;: &quot;./src/services&quot;
          }
        }
      ],
      [&quot;import&quot;, {
        &quot;libraryName&quot;: &quot;antd&quot;,
        &quot;style&quot;: true
      }]
    ]
  }
  
  </code></pre>