Migrating Next.js plugins from next-compose-plugins

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",
    },
  });
};

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
});

Changelog

1. Update the last snippet after feedback from Miguel Leite

Comments

[Miguel Leite]

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
});

How about this? 👆

[Krzysztof Żuraw]

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

[Arek]

Please have a look at the successor of next-compose-plugins which is next-recompose-plugins. This package provides a clean and easy API for Next.js's plugins configuration and composition.

Here is a sneak peek:

const config = new Config(async () => {
    await something();

    return {...};
  })
  .applyPlugin((phase, args, config) => {
    return plugin1(config);
  }, 'plugin-1')
  .applyPlugin((phase, args, config) => {
    return plugin2(config);
  }, 'plugin-2')
  .applyPlugin((phase, args, config) => {
    return plugin3(config);
  }, 'plugin-3')
  .build();

I highly recommend this package because it allows us to apply plugins seamlessly, the plugin application is less error prone, and the final code looks clean and consistent.

[huyanyawei]

Hello, I would like to ask a question, in next.js, how to execute the init() of sentry only on the client side, not on the server side, because window is not defined

[huyanyawei]

import { init, WINDOW } from "@sentry/nextjs";