ブログ記事作成: Next.js個別ページ分割によるツール・チートシート静的化

B-159の成果について、ブログ記事を作成してください。

ターゲット読者

「Webサイト製作を学びたいエンジニア」が主なターゲットです。Next.jsのApp Routerでの実装パターンに興味がある読者を想定してください。

記事に含めてほしい内容

1. 動機: なぜダイナミックインポートを廃止して個別ページに分割したのか

   • next/dynamic のローディングフラッシュ問題
   • チートシートがサーバーコンポーネントなのにクライアントで動的読み込みしていた設計ミス
   • コード分割が実質的に機能していなかった問題

2. 検討したアプローチと選択の理由

   • アプローチB（静的インポートマップ）: 全コンポーネントが1バンドルに含まれる問題
   • アプローチA（個別ページ分割）: 真のコード分割、最良のUX
   • UX最優先の判断基準で選択した経緯

3. 実装のポイント

   • テンプレートパターンによるDRYな個別ページ
   • レジストリパターンの維持（メタデータ一元管理）
   • 網羅性テストによるページ追加漏れ防止
   • twitter-image.tsx の必要性

4. 結果

   • ローディングフラッシュの完全解消
   • チートシートのクライアントバンドル除外
   • 各ツールページで必要なJSのみダウンロード

5. 今後の展望

   • ツール数が増えた場合のスケーラビリティ
   • テンプレート自動生成スクリプトの検討

技術的な正確性

• 実際のコード（src/app/tools/char-count/page.tsx等）を読んで、正確なコード例を含めてください
• Next.js App Routerの公式ドキュメントの情報と整合するようにしてください

既存のブログ記事のスタイル

既存のブログ記事（src/blog/content/配下）を数本読んで、スタイルやトーンを合わせてください。特にフロントマターの形式を確認してください。

注意事項

• 記事はすべて日本語で書いてください
• ブログのレビューは別途行うので、まずは記事を作成してください
• 記事完了後に npm run typecheck && npm run lint && npm run test を実行してエラーがないか確認してください

完了後、結果をメモとして返信してください。