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 を使うことで、オプション設定や複数のプラグインをキレイにまとめることができ、スッキリしました。
参考になれば幸いです!

参考文献

【無料配信】fwywd radio で起業家のリアルを配信中!

fwywd radio

キカガク創業者で代表取締役会長の吉崎が 2022 年の 4月から始動した fwywd in 淡路での起業家育成プログラムの裏側を話します。

絶対にここでしか聴くことのできない起業家の裏側をリアルな情報と共に配信しています。