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

はじめに

// next.config.js
module.exports = {
  /* config options here */
  images: {
    deviceSizes: [340, 640, 768, 1024, 1280, 1440, 1980],
    domains: ['fwywd.com'],
  },
};

next-compose-plugins の導入

yarn add -D next-compose-plugins

next-compose-plugins の使い方

// next.config.js
const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([plugin1, plugin2, …], {
  /* オプション設定 */
});

// 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'],
  },
});

最後に

参考文献

• cyrilwanner/next-compose-plugins: 💡next-compose-plugins provides a cleaner API for enabling and configuring plugins for next.js