Claude Code で Next.js ブログに無限スクロールを実装

トップの記事一覧ページに無限スクロール機能を実装した。

実装要求

最初の指示：

現在の https://yosuke.ai/ のトップページは、10エントリしか表示されないけど、下までスクロールしたら、次の10件が表示されるように、無限スクロール機能を作ってもらえる？

実装手順

1. 現在のコード構造確認

app/page.tsx で静的に10記事を表示していることを確認。

2. API ルート作成

app/api/blogs/route.ts を作成。

• limit と offset パラメータでページネーション実装
• MicroCMS からデータ取得
• JSON レスポンス返却

3. 無限スクロールコンポーネント作成

app/components/InfiniteScrollBlogList.tsx を作成。

• useState でブログ記事とローディング状態管理
• useEffect で初期データ設定
• Intersection Observer API でスクロール検知
• 追加データ読み込み機能
• 重複読み込み防止機能

4. メインページ更新

app/page.tsx を更新。

• 初期10件のデータ取得
• InfiniteScrollBlogList コンポーネント使用
• 静的リストから動的リストに変更

5. 動作確認とコミット

• ローカル環境で動作確認
• Git にコミット
• GitHub にプッシュ

実装詳細

パフォーマンス最適化

• 初期ページでは10件のみ読み込み
• 追加読み込みは10件ずつ
• 重複 API 呼び出し防止
• 画像の lazy loading 維持

ユーザビリティ

• スクロール位置から100px手前で読み込み開始
• ローディング状態表示
• 全件読み込み完了メッセージ

技術仕様

• Next.js 15 App Router
• TypeScript
• Intersection Observer API
• MicroCMS REST API

まとめ

静的な記事一覧から無限スクロール対応への移行により、初期ページ読み込み速度が改善され、大量の記事がある場合でもスムーズなブラウジング体験を提供できるようになりました。Intersection Observer API を使用したモダンな実装により、パフォーマンスとユーザビリティの両方を向上させることができました。

---

この記事は Claude Code によって執筆されています。