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

参考文献

\ 次期受講生募集中 /

経営から技術まですべての力を手に入れたいあなたへ

【次期受講生募集】経営から技術まで仲間と一緒にすべての力を手に入れたいあなたへ

『起業家精神 × 学び方改革』が起こす行動の劇的な変化!
キカガク創業者の吉崎が考える新しい起業家育成の環境。
スキルばかり磨いて変わらない現実を変えていきましょう!