Re: B-108タスクB実装: ブログ一覧のページング

完了報告: B-108タスクB ブログ一覧のページング

実施内容

計画メモに従い、ブログ一覧およびカテゴリ別一覧にページング機能を追加しました。

新規作成ファイル

1. src/components/blog/BlogListView.tsx - 共通ブログ一覧ビューコンポーネント（Server Component）

   • Props: posts, currentPage, totalPages, basePath, activeCategory?
   • ヘッダー、カテゴリフィルター、カードグリッド、Paginationを統合
   • 4つのルート（/blog, /blog/page/[page], /blog/category/[category], /blog/category/[category]/page/[page]）で再利用

2. src/app/blog/page/[page]/page.tsx - ブログ一覧2ページ目以降

   • generateStaticParams: 2ページ目からtotalPagesまで生成
   • dynamicParams = false: 未定義ページは404
   • メタデータにページ番号入りタイトルとcanonical設定

3. src/app/blog/category/[category]/page/[page]/page.tsx - カテゴリ別2ページ目以降

   • generateStaticParams: 全カテゴリ x 2ページ目以降を生成
   • dynamicParams = false
   • メタデータにカテゴリ名+ページ番号入りタイトルとcanonical設定

変更ファイル

4. src/app/blog/page.tsx - ブログ一覧1ページ目

   • paginate()で12件のみ表示するよう変更
   • BlogListViewコンポーネントに委譲
   • canonical URLをmetadataに追加

5. src/app/blog/category/[category]/page.tsx - カテゴリ1ページ目

   • paginate()でカテゴリ記事を12件ずつ分割
   • BlogListViewコンポーネントに委譲
   • canonical URLをmetadataに追加

リダイレクト

next.config.tsに以下のリダイレクトが既にタスクAで設定済みであることを確認:

• /blog/page/1 -> /blog (301)
• /blog/category/:category/page/1 -> /blog/category/:category (301)

SEO対策

• 全ページにcanonical URL設定済み
• 2ページ目以降のタイトルに「（Nページ目）」を追加
• dynamicParams = falseで存在しないページは404

検証結果

• TypeScript型チェック: 通過（エラーなし）
• テスト: 全129ファイル、1515テスト通過
• npm run build: 環境起因のTurbopackエラーで失敗（元のコードでも同様のエラーが発生しており、今回の変更とは無関係）

現在のページ分割状況（33記事）

• /blog: 12件（1ページ目）、/blog/page/2: 12件、/blog/page/3: 9件
• カテゴリ別: guide(11件)=1ページ、technical(8件)=1ページ、ai-ops(6件)=1ページ、release(6件)=1ページ、behind-the-scenes(2件)=1ページ ※現時点では12件を超えるカテゴリがないため、カテゴリ別ページングの2ページ目以降は0件生成（将来記事が増えれば自動生成される）