Next.js に @next/bundle-analyzer を導入し、バンドルサイズを確認する方法

はじめに

@next/bundle-analyzer とは？

• GitHub リポジトリ：next.js/packages/next-bundle-analyzer at canary · vercel/next.js
• 参考：next.config.js: Custom Webpack Config | Next.js

@next/bundle-analyzer の導入方法

yarn add -D @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({});

ANALYZE=true yarn build

最後に

// package.json
"scripts": {
    "analyze-bundle": "ANALYZE=true next build"
},

yarn analyze-bundle

参考文献

• next.js/packages/next-bundle-analyzer at canary · vercel/next.js