Next.js Webpack Config Override

Get total control over Next.js Webpack configurations

Installation

npm

npm install nextjs-webpack-override --save

Yarn

yarn add nextjs-webpack-override

Getting Started

This project allows developers to take full control of Webpack configurations in Next.js projects. Next only gives limited access to webpack control - often leaving developers limited when trying to perform advanced re-configurations.

// standard next.js config
const NextJsWebpackOverride = require('nextjs-webpack-override');

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.plugins.push(
      new NextJsWebpackOverride({
        // any standard webpack options that are usually inaccessible
        optimization: {
          runtimeChunk: 'single',
          splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
              vendor: {
                test: /[\\/]node_modules[\\/]/,
                name(module) {
                  // get the name. E.g. node_modules/packageName/not/this/part.js
                  // or node_modules/packageName
                  const packageName = module.context.match(
                    /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                  )[1];

                  // npm package names are URL-safe, but some servers don't like @ symbols
                  return `npm.${packageName.replace('@', '')}`;
                },
              },
            },
          },
        },
      })
    );
    return config;
  },
  webpackDevMiddleware: (config) => {
    return config;~~~~
  },
};