Next.js Bundle AnalysisをApp Routerに導入する

HashiCorpが出しているCIでベースブランチとPRのNext.jsのバンドルサイズの差を計測するActionsをApp Routerで動かすメモ。

GitHub - hashicorp/nextjs-bundle-analysis: A github action that provides detailed bundle analysis on PRs for next.js apps

インストール

以下のコマンドを実行するとプロンプトが表示され、入力すると.github/workflowsにnextjs-bundle-analysis.ymlを作成し、package.jsonに設定が追加されます。

npx  -p nextjs-bundle-analysis generate

package.jsonの設定は以下のようにしています。

  "nextBundleAnalysis": {
    "budget": 358400,
    "budgetPercentIncreaseRed": 20,
    "minimumChangeThreshold": 0,
    "showDetails": true
  }

• budgetはバンドルサイズの上限です。
• budgetPercentIncreaseRedは前回のバンドルサイズとの差がこの値を超えると赤く表示されます。
• minimumChangeThresholdは変更がこの値を超えると表示されます。
  • 0にすると全て表示されます。
• showDetailsは詳細を表示するかどうかです。

App Routerに対応させる

HashiCorpの実装ではまだApp Routerに対応していないため、スクリプトを貼り替えます。

tutorial : using the appdir directory · Issue #83 · hashicorp/nextjs-bundle-analysis

1. 依存関係をインストール

pnpm i -D gzip-size@6 mkdirp

1. フォークされたスクリプトをreport-bundle-size.jsとしてプロジェクトのルートにコピー: report-bundle-size.js · GitHub
2. nextjs_bundle_analysis.yml を開き、- name: Analyze bundle というアクションを見つけて、npx -p nextjs-bundle-analysis report を node report-bundle-size.js に置き換える

これでApp Routerでもバンドルサイズを計測できるようになります。おそらくgzip-sizeを6に固定しているのはモジュール解決の関係だと思われるので、ESMに書き換えれば動くと思います。

コメントが複数作成されないようにする

nextjs-bundle-analysisの実装に問題があり、PRごとにコメントを作成してしまいます。これを修正するには、コメント系のstepを消し、以下のように置き換えます。

next-touched-pagesというヘッダーを使ってコメントを作成します。

- name: Comment
  uses: marocchino/sticky-pull-request-comment@v2
  with:
    header: next-touched-pages
    message: ${{ steps.get-comment-body.outputs.body }}

update comment not working, PR gets multiple comments · Issue #57 · hashicorp/nextjs-bundle-analysis

依存の更新、作成したActionをpushする

actions/upload-artifactなどのバージョンなどが古いので更新します。

また、このAcitonはベースブランチを比較するため、初回のプルリクエストでは実行に失敗するはずです。その場合は無視して一旦マージしましょう。