NextJS is a popular framework for building server-rendered React applications. One of the key features of Next.js is its ability to configure and extend the framework using plugins easily. This article will explore how to add multiple plugins to your Next.js config file.

First, let’s look at what a Next.js config file looks like. By default, the config file is called next.config.js and is located at the root of your NextJS project. It should export a single object containing various configuration options. Let’s start with a next.config.js that use only a bundler analyzer, like @next/bundle-analyzer, it’s a webpack bundler analyzer.

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  reactStrictMode: false,
  eslint: {
    ignoreDuringBuilds: true,
  },
});

In this example, we are saying to the App to disable React Strict Mode and ESLint when we build the NextJS App.

Let’s say we want to work with ThreeJS. How can I add this new plugin @react-three/fiber to my NextJS bundle? According to the docs, we need to add our next.config.js file:

const withTM = require('next-transpile-modules')(['three'])
module.exports = withTM()

But we already have a module.exports and there should only be one export in the next.config.js file.

We have two solutions to solve our problem.

Without next-compose-plugins

Fortunately for us, NextJS plugins are built to be chainable. We can nest each plugin call inside the next one and pass the actual config object on the last call

Here is a code example of how to do that:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

const withTM = require('next-transpile-modules')(['three']);

module.exports = withTM(
  withBundleAnalyzer({ 
    reactStrictMode: false,
    eslint: {
      ignoreDuringBuilds: true,
    },
    // Everything related to webpack - not mandatory, in my case it's just for the example as it works without
    webpack(config) {
        return config;
    }
  })
);

Note that the order of nesting influences the loading of plugins in your NextJS App. If we don’t like this syntax, it’s possible to do it another way.

With next-compose-plugins

If we start to have lots of plugins, the nesting can get messy, and to clean up our next.config.js we can use next-compose-plugins. Our next.config.js will now look like this:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

const withTM = require('next-transpile-modules')(['three']);

module.exports = withPlugins(
    [withTM, withBundleAnalyzer], // Next plugins here
    // Then the main NextJS config object
    { 
      reactStrictMode: false,
      eslint: {
        ignoreDuringBuilds: true,
      },
      // Everything related to webpack - not mandatory
      webpack(config) {
          return config;
      }
    }
);

By following the steps outlined in this article, you should be able to add multiple plugins to your NextJS config file, with or without next-compose-plugins.

Remember that before adding any plugin, you should check its compatibility with the version of Next.js you are running and its documentation to configure them correctly.