next.config.js helpers

next.config.js helpers.md

next.config.js Helpers

Mutate next.js internal config to make changes which are not officially available to you. Be sure to know what you're doing.

Helpers

const getPluginsByConstructorName = (constructorName, plugins) =>
  plugins.filter((plugin) => plugin.constructor.name === constructorName);

const getRulesByLoaderName = (loaderName, allRules) => {
  const matches = [];

  const visit = (rules) =>
    rules.forEach((rule) => {
      if (Array.isArray(rule.use)) {
        visit(rule.use);
      }
      if (Array.isArray(rule.oneOf)) {
        visit(rule.oneOf);
      }
      if (typeof rule.loader === 'string' && rule.loader.includes(loaderName)) {
        matches.push(rule);
      }
    });

  visit(allRules);
  return matches;
};

Example Usage

// next.config.js
module.exports = () => {
  return {
    webpack(config, options) {
      getRulesByLoaderName('mini-css-extract-plugin', config.module.rules).forEach((use) => {
        use.options.filename = 'static/css/[name]-[hash].css';
      });

      getPluginsByConstructorName('NextMiniCssExtractPlugin', config.plugins).forEach((plugin) => {
        plugin.options.filename = 'static/css/[name]-[hash].css';
      });

      return config;
    },
  };
};