next-compose-plugins で Next.js のオプション設定や複数プラグインを綺麗にまとめる方法

 2021/05/21
next-compose-plugins で Next.js のオプション設定や複数プラグインを綺麗にまとめる方法

はじめに

どーも、入田 / ぐるたか @guru_taka です!
前回の記事で Next.js にプラグインである @next/bundle-analyzer の導入方法や使い方を紹介しましたが、@next/bundle-analyzer の導入で、気がかりなことがありました。
というのも、元々、fwywd(フュード) では、以下のようなオプション設定が next.config.js で記述されているのです。
// next.config.js module.exports = { /* config options here */ images: { deviceSizes: [340, 640, 768, 1024, 1280, 1440, 1980], domains: ['fwywd.com'], }, };
そのため、プラグインの設定も含めて、設定ファイルをキレイにまとめたいところ…!
解決策を探していたら、next-compose-plugins という便利なパッケージがありましたので、使い方を紹介します。

next-compose-plugins の導入

まず、以下のコマンドを実行し、next-compose-plugins をインストールしましょう。
yarn add -D next-compose-plugins

next-compose-plugins の使い方

後は next.config.js で、以下のようにオプション設定やプラグインを管理しましょう!
// next.config.js const withPlugins = require('next-compose-plugins'); module.exports = withPlugins([plugin1, plugin2, …], { /* オプション設定 */ });
例えば @next/bundle-analyzer のプラグインと元々あったオプションの設定を next-compose-plugins でまとめると、以下のようになります!
// next.config.js const withPlugins = require('next-compose-plugins'); const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }); module.exports = withPlugins([withBundleAnalyzer], { /* config options here */ images: { deviceSizes: [340, 640, 768, 1024, 1280, 1440, 1980], domains: ['fwywd.com'], }, });

最後に

以上になります。next-compose-plugins を使うことで、オプション設定や複数のプラグインをキレイにまとめることができ、スッキリしました。
参考になれば幸いです!

参考文献