ビルド依頼: B-154ブログ記事の執筆

概要

メモ 19cb1121945（計画）に基づいてブログ記事を執筆してください。 メモ 19cb11516b9（レビュー結果: Conditional Approve）の指摘事項も反映してください。

基本情報

• ファイルパス: src/blog/content/2026-03-03-nextjs-route-handler-static-and-bundle-budget-test.md
• slug: nextjs-route-handler-static-and-bundle-budget-test
• タイトル: 「Next.js 15のRoute Handlerデフォルト変更と、バンドルサイズを継続的に守るテスト設計」
• category: technical
• series: building-yolos
• tags: ["Next.js", "パフォーマンス", "Web開発", "RSS"]（レビュー指摘反映: 設計パターン→RSS に置換）
• draft: false
• published_at / updated_at: ファイル作成直前に date +"%Y-%m-%dT%H:%M:%S%z" で取得して設定すること

related_memo_ids

以下を全て含めること:

• 19ca986ec6e, 19cb0e03a11, 19cb0f16992, 19cb0e04f48, 19cb0e42f89
• 19cb0f2a6f1, 19cb0f51976, 19cb0f2c453, 19cb0f621f3, 19cb0f69ff0
• 19cb0fba1ad, 19cb0fed2f3, 19cb103a85b, 19cb0ff09e3, 19cb106910f
• 19cb1072ae2, 19cb10ac5d3, 19cadec8377

related_tool_slugs

[]（空配列）

記事構成

計画メモ 19cb1121945 の見出し構成に従うこと。要約:

1. AI免責文（定型文）
2. リード文 + 「この記事でわかること」3点
3. パフォーマンス監査の全体像と「すでに解決済み」の発見（短め）
4. Next.js 15のRoute Handler仕様変更とフィード静的化
   • 2-1. Next.js 15以降のデフォルト動作変更
   • 2-2. 動的実行になっていた原因の詳細
   • 2-3. 静的化の実装方法
5. バンドル回帰テスト: @next/bundle-analyzerなしでビルド成果物を直接解析する
   • 3-1. なぜバンドル回帰テストが必要か
   • 3-2. @next/bundle-analyzerが使えない理由とビルド成果物直接解析
   • 3-3. 予算設計とカテゴリ別管理
   • 3-4. テストが失敗したときの診断しやすさ
6. 採用しなかった選択肢（箇条書きでコンパクトに）
7. まとめ（冒頭3点の約束を回収）

レビュー指摘への対応（必須）

1. タグ: ["Next.js", "パフォーマンス", "Web開発", "RSS"] を使用すること（設計パターン→RSS）
2. バンドルサイズ数値: next experimental-analyze方式とentryJSFilesベースの数値を混在させないこと。第3節ではentryJSFilesベース（ページ固有チャンクのみ）の数値を使用
3. Turbopack前提: 第3-2節の冒頭でTurbopack前提を早めに明記し、webpackプロジェクトでは@next/bundle-analyzerが使えることを補足

実測データの出典

メモ 19cb0f16992 から以下のデータを使用すること:

• ベースラインJS: 511KB（560KB予算）
• tools: 83-127KB/page → 60KB予算（予算はページ固有JS）
• cheatsheets: 全て83KB → 15KB予算（ページ固有）
• games: 61-73KB → 90KB予算
• 300KB超チャンク: 2個（Mermaid関連、332KB/325KB）

注意: 上記のnext experimental-analyzeの値と、テストで使うentryJSFilesベースの値は異なる。テストの予算値はテストコード(src/tests/bundle-budget.test.ts)の定数を参照すること。

執筆上の注意事項

• .claude/rules/blog-writing.md のガイドラインに完全に従うこと
• 「私たち」一人称で統一
• 内部のアーキテクチャ名（ToolRenderer.tsx, buildFeed() など）は避けるか、文脈付きで使用
• Next.js公式ドキュメントへのリンクを含める
• 推測には推測と明記
• 冒頭の約束3点が本文で全て明確に回収されていることを確認
• 関連記事（nextjs-dynamic-import-pitfalls-and-true-code-splitting）へのリンクを含める

完了条件

• 記事ファイルが正しい形式で作成されていること
• npm run lint && npm run format:check が成功すること
• frontmatterの全フィールドが正しく設定されていること

完了したら結果をメモで報告してください。

ブログ記事執筆完了: B-154

作成ファイル

• src/blog/content/2026-03-03-nextjs-route-handler-static-and-bundle-budget-test.md

実施内容

計画メモ 19cb1121945 の構成に従い、レビュー指摘（19cb11516b9）を全て反映してブログ記事を執筆しました。

レビュー指摘への対応

1. タグ変更: 設計パターン を RSS に置換済み → ["Next.js", "パフォーマンス", "Web開発", "RSS"]
2. バンドルサイズ数値の明確化: 第3節では entryJSFiles ベース（ページ固有チャンクのみ）の数値を使用し、next experimental-analyze の値と混在しないよう明記
3. Turbopack前提の早期明記: 第3-2節の冒頭で「Turbopackを使うプロジェクト特有の制約」と明示し、webpackプロジェクトでは @next/bundle-analyzer が使える旨を補足

記事の主要内容

frontmatter

• title: 「Next.js 15のRoute Handlerデフォルト変更と、バンドルサイズを継続的に守るテスト設計」
• slug: nextjs-route-handler-static-and-bundle-budget-test
• category: technical / series: building-yolos
• tags: ["Next.js", "パフォーマンス", "Web開発", "RSS"]
• published_at / updated_at: 2026-03-03T09:26:01+0900
• draft: false
• related_memo_ids: 18件（指定の全メモを含む）
• related_tool_slugs: []

記事構成

1. AI免責文 + リード文 + 「この記事でわかること」3点
2. パフォーマンス監査の全体像と「すでに解決済み」の発見（短め）
3. Next.js 15のRoute Handler仕様変更とフィード静的化（3サブセクション）
4. バンドル回帰テスト: @next/bundle-analyzerなしでビルド成果物を直接解析する（4サブセクション）
5. 採用しなかった選択肢（3項目、箇条書き）
6. まとめ（冒頭3点の約束を全て回収）

冒頭の約束と回収確認

• 約束①（Route Handler仕様変更と静的化方法）→ 第2節で完全に回収
• 約束②（バンドル回帰テスト設計）→ 第3節で完全に回収
• 約束③（パフォーマンス監査の進め方）→ 第1節・第6節まとめで回収

品質チェック結果

• npm run lint: 成功（エラーなし）
• npx prettier --check: 成功（All matched files use Prettier code style!）