Skip to content
Search

DEV Community

Krzysztof Żuraw
Krzysztof Żuraw

Posted on • Originally published at krzysztofzuraw.com on

 

Migrating Next.js plugins from next-compose-plugins

#nextjs #plugins #guide

I recently updated Next.js to version 12.2.3 and I found out that next-compose-plugins do not work anymore. After peek at GitHub issue and I was able to copy and paste working solution:

/**
 * @type {import('next').NextConfig}
 */
module.exports = () => {
  const plugins = [withTM, withVanillaExtract, withSentryConfig];
  return plugins.reduce((acc, next) => next(acc), {
    i18n: {
      locales: ["en-US", "nl-BE", "pl-PL"],
      defaultLocale: "en-US",
    },
  });
};
Enter fullscreen mode Exit fullscreen mode

It worked fine but I wanted to pass argument to withSentryConfig - i turns out that I need to pass it as another argument to next function in reduce:

return plugins.reduce((acc, next) => {
  if (next.name === 'withSentryConfig') {
    return next(acc, {silent: true });
  }

  return next(acc);
}, {
  // the rest of next.js config
});
Enter fullscreen mode Exit fullscreen mode

Changelog

  1. Update the last snippet after feedback from Miguel Leite

Top comments (2)

Collapse
 
miguelacleite profile image
Miguel Leite • • Edited

You need to be careful about the final reduce, since you're passing the silent property to every single plugin. You're also missing a closing parenthesis on the next() call.

return plugins.reduce((acc, next) => {
  if (next.name === 'withSentryConfig') {
    return next(acc, {silent: true });
  }

  return next(acc);
}, {
  // the rest of next.js config
});
Enter fullscreen mode Exit fullscreen mode

How about this? 👆

Collapse
 
krzysztofzuraw profile image
Krzysztof Żuraw •

@miguelacleite thanks for catching that - I'll update the code 🙇🏻

Read next

mirfayekhossain profile image

How to Detect Clicks Outside of an Element in NextJS or React

Mir Fayek Hossain -

vulcanwm profile image

Login and Signup with Next.js

Medea -

daltonic profile image

How to Build a Transparent and Secure Lottery DApp with NextJs, Solidity, and CometChat

Gospel Darlington -

strapijs profile image

Next.js or SvelteKit: Choosing the Best for Your Strapi App

Strapi -