Zenn
🎃

Next.jsでBundle analyzerを使う方法 (windowsの人)

に公開
2件
JavaScript
Next.js
TypeScript
tech

javascriptのバンドルサイズを測るためのモジュールbundle-analyzerを使うために公式ドキュメント通りにコードを書きましたが、うまくいきませんでした。

エラー

  • requireが使えない
  • ANALYZEが見つからない

解決策

まず、next.config.jsファイルなのか、next.config.mjsファイルなのかを確認してください。1.next.config.jsファイルの場合は、公式ドキュメント通りに実装します。
2.next.config.mjsの場合は、以下のように設定します。

next.config.mjs
/** @type {import('next').NextConfig} */

import withBundleAnalyzer from '@next/bundle-analyzer';

const bundleAnalyzer=withBundleAnalyzer({
enabled:process.env.ANALYZE==='true'
})

const nextConfig={}  

export default bundleAnalyzer(nextConfig)

windowsを使用している場合

windowsを使用している場合は、cross-envをインストールしてください。

npm install cross-env --save-dev

pack.jsonのscriptsに以下を追加してください。

{
  "scripts": {
    "build:analyze": "cross-env ANALYZE=true npm run build"
  }
}

最後に以下のコマンドを実行すると、bundle-analyzerが使用できます。

npm run build:analyze

参考文献
https://github.com/vercel/next.js/discussions/30770

Discussion