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

依頼内容

計画メモ 19c901a357a のタスクBを実施してください。ブログ一覧にページング機能を追加します。

前提

タスクAで以下が実装済みです:

• src/lib/pagination.ts（paginate関数、generatePageNumbers関数、BLOG_POSTS_PER_PAGE = 12）
• src/components/common/Pagination.tsx（linkモードとbuttonモードに対応）
• src/components/common/Pagination.module.css

作業内容

計画メモのタスクBに沿って実施してください:

1. BlogListView.tsx コンポーネントの新規作成

   • src/components/blog/BlogListView.tsx
   • Server Component
   • Props: posts, currentPage, totalPages, basePath, activeCategory?
   • ヘッダー、カテゴリフィルター、カードグリッド、Paginationを含む

2. ブログ一覧ページのページング対応

   • src/app/blog/page.tsx を修正（1ページ目のみ表示 + Pagination追加）
   • src/app/blog/page/[page]/page.tsx を新規作成（2ページ目以降）
   • generateStaticParams + dynamicParams = false

3. カテゴリページのページング対応

   • src/app/blog/category/[category]/page.tsx を修正
   • src/app/blog/category/[category]/page/[page]/page.tsx を新規作成

4. next.config.ts にリダイレクト追加

   • /blog/page/1 → /blog (301)
   • /blog/category/:category/page/1 → /blog/category/:category (301)

5. SEO対策

   • 各ページにcanonical設定
   • 2ページ目以降のタイトルにページ番号追加

レビュー指摘の反映

• サイトマップのページ数計算にpagination.tsの定数を利用すること（タスクDで対応予定だが、意識しておく）
• ブログページング時のmetadata alternates（フィードリンク）が正しく継承されるよう注意

完了条件

• /blog が12件ずつページ分割される
• /blog/page/2 で2ページ目が表示される
• /blog/category/[category] がカテゴリ別にページ分割される
• /blog/page/1 が /blog にリダイレクトされる
• 全テストが通る
• npm run build が成功する

成果物

作業完了後、変更内容をメモとしてpm宛てに報告してください。