title: How to combine multiple JS files into a single bundle while using NextJS?
body: <p>I am using NextJS to build an SSR web app and currently have just two dummy pages, index and about. The site loads fine, except that NextJS throws up a bunch of JS files:</p>
  
  <ol>
  <li><a href="https://www.schandillia.com/_next/341c66db-91d8-47da-97af/page/index.js" rel="nofollow noreferrer">https://www.schandillia.com/_next/341c66db-91d8-47da-97af/page/index.js</a></li>
  <li><p><a href="https://www.schandillia.com/_next/341c66db-91d8-47da-97af/page/about.js" rel="nofollow noreferrer">https://www.schandillia.com/_next/341c66db-91d8-47da-97af/page/about.js</a></p></li>
  <li><p><a href="https://www.schandillia.com/_next/341c66db-91d8-47da-97af/page/_app.js" rel="nofollow noreferrer">https://www.schandillia.com/_next/341c66db-91d8-47da-97af/page/_app.js</a></p></li>
  <li><p><a href="https://www.schandillia.com/_next/341c66db-91d8-47da-97af/page/_error.js" rel="nofollow noreferrer">https://www.schandillia.com/_next/341c66db-91d8-47da-97af/page/_error.js</a></p></li>
  <li><p><a href="https://www.schandillia.com/_next/static/commons/main-975e462d96245579782f.js" rel="nofollow noreferrer">https://www.schandillia.com/_next/static/commons/main-975e462d96245579782f.js</a></p></li>
  </ol>
  
  <p>Since these are created and get injected into the DOM during compile-time, it results in several round trips during page-load and I'd love to avoid that. Is there any way to concatenate them all into a single JS payload during compile and then inject that concatenated bundle into the DOM using some kind of Webpack middleware? My <code>next.config.js</code> currently looks like this:</p>
  
  <pre><code>const path = require('path');
  const glob = require('glob');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const webpack = require('webpack');
  require('dotenv').config();
  
  module.exports = {
    distDir: '.build',
    webpack: (config) =&gt; {
      config.module.rules.push(
        {
          test: /\.(css|scss)$/,
          loader: 'emit-file-loader',
          options: {
            name: path.join('dist', '[path][name].[ext]'),
          },
        },
        {
          test: /\.(css|sass|scss)$/,
          use: ExtractTextPlugin.extract([
            {
              loader: 'css-loader',
              options: {
                sourceMap: false,
                minimize: true,
              },
            },
            'postcss-loader',
            {
              loader: 'sass-loader',
              options: {
                includePaths: ['styles', 'node_modules']
                  .map(d =&gt; path.join(__dirname, d))
                  .map(g =&gt; glob.sync(g))
                  .reduce((a, c) =&gt; a.concat(c), []),
              },
            },
          ]),
        },
        {
          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          loader: 'url-loader?limit=10000&amp;mimetype=application/font-woff&amp;outputPath=static/',
        },
        {
          test: /\.(svg|ttf|eot)$/i,
          loader: 'file-loader?outputPath=static/',
          options: {
            name: '[path][name].[ext]',
          }
        },
        {
          test: /\.(png|jpe?g|gif)$/i,
          loaders: [
            'file-loader?outputPath=static/',
            'image-webpack-loader?bypassOnDebug&amp;optimizationLevel=7&amp;interlaced=false',
          ],
        },
      );
      config.plugins.push(
        new ExtractTextPlugin({
          filename: path.join('static', `${process.env.CSS}.min.css`),
        }),
        new webpack.DefinePlugin({
          'process.env.CSS': JSON.stringify(process.env.CSS),
          'process.env.NAVBAR_LOGO': JSON.stringify(process.env.NAVBAR_LOGO),
        }),
      );
      return config;
    },
  };
  </code></pre>
  
  <p>Any tips?</p>