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 (5)

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
 
kzuraw profile image
Krzysztof Żuraw •

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

Collapse
 
arklanq profile image
Arek • • Edited

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();
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
huyanyawei profile image
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

Collapse
 
huyanyawei profile image
huyanyawei •

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

Read next

robertobutti profile image

Building a website using Markdown content with Next.js App Router and Fusionable

Roberto B. -

stevendev0822 profile image

How to integrate ERC20 token presale smart contract with Frontend

Steven -

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 71-80 (Part 8)

Probir Sarkar -

redrobotdev profile image

Next.js on AWS: Deployment Strategies

RedRobot.dev -