How to Combine and Use Multiple Next.Js Plugins

How to combine several plugins inside next.config.js file?

You seem to be mixing several configs incorrectly into your Next.js config file.

With next-compose-plugins

To begin with your next.config.js should only have a single module.exports, and since you're using next-compose-plugins, it should roughly follow this structure:

// next.config.js

// Omitting requires for simplicity
 
module.exports = withPlugins(
    [withImages, withSass, withCSS, withVideos, withBundleAnalyzer], // All next plugins go here
    // Below is the main Next.js config object
    { 
        images: {
            domains: ['cdn.shopify.com']
        },
        serverRuntimeConfig: {
            mySecret: "secret",
            secondSecret: process.env.SECOND_SECRET
        },
        publicRuntimeConfig: {
          staticFolder: "/public"
        },
        // From here everything that's Webpack-related
        webpack(config) {
            // Add your custom Webpack configs
            return config;
        }
    }
);

Without next-compose-plugins

The same can be achieved without using next-compose-plugins, by chaining the plugins instead.

// next.config.js

// Omitting requires for simplicity
 
module.exports = withImages(
    withSass(
        withCSS(
            withVideos(
                withBundleAnalyzer({
                    images: {
                        domains: ['cdn.shopify.com']
                    },
                    serverRuntimeConfig: {
                        mySecret: "secret",
                        secondSecret: process.env.SECOND_SECRET
                    },
                    publicRuntimeConfig: {
                        staticFolder: "/public"
                    },
                    // From here everything that's Webpack-related
                    webpack(config) {
                        // Add your custom Webpack configs
                        return config;
                    }
                })
            )
        )
    )
);

---

Finally, the following config belongs to your ESlint config file, and not Next.js config.

// .eslintrc.js
module.exports = {
    extends: 'airbnb-base',
    rules: {
        'arrow-body-style': 0,
    },
};

How to combine plugins and other in next js next.config.js

Just like this:

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

const nextConfiguration = {
  target: 'serverless',
  trailingSlash: true
  historyApiFallback: true
};

module.exports = withPlugins([optimizedImages], nextConfiguration);

How to combine withPlugins with internatioinalization config in a next.config.js file

What version of Next.JS are you using? I faced the same problem and it was fixed by updating to +10.0.0.

You can see on the i18n documentation on Next that this is the minimum version.

Next.js has built-in support for internationalized (i18n) routing since v10.0.0. You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.

More info: https://nextjs.org/docs/advanced-features/i18n-routing

Configure multiple next plugins: withMDX, withBundleAnalyzer

You can setup the config without using next-compose-plugins as well.

const withMDX = require('@next/mdx')({
  extension: /\.mdx$/,
})
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
})

module.exports = withMDX(withBundleAnalyzer({
    // Your Next.js configs, including withMDX-specific options
}))

How do I combine several module.exports in Next.js next.config.js?

You don't need to export two modules, you suppose to export a single configuration object.

Check all possible NextJS configurations here.

const withPWA = require("next-pwa");

module.exports = withPWA({
  future: { webpack5: true },
  pwa: {
    dest: "public",
    swSrc: "service-worker.js",
  },
  env: {
    SANITY_DATASET_NAME: process.env.SANITY_DATASET_NAME,
    SANITY_PROJECT_ID: process.env.SANITY_PROJECT_ID,
  },
});

How to combine Next.js config setting?

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

module.exports = withBundleAnalyzer({
  images: {
    domains: [
      "ticket-t01.s3.eu-central-1.amazonaws.com",
      "media.istockphoto.com",
    ],
    deviceSizes: [320, 375, 450, 540, 640, 750, 828, 1080, 1200, 1920],
  },
  reactStrictMode: true,
  poweredByHeader: false,
  async redirects() {
    return [
      {
        source: "/",
        destination: "/hu",
        permanent: true,
      },
    ];
  },
});

---

Related Topics