📄【Next.js × SWR】学習記録アプリにページネーションを導入した話

🎯 はじめに

学習記録が増えてきたことで、一覧画面が長くなりユーザー体験が低下していました。そこで今回は、ページネーション（ページ分割）機能を導入し、データを分割して表示できるようにしました。

🛠 技術スタック

• フロントエンド: Next.js (App Router)

• 状態管理 / データ取得: SWR

• 型安全: TypeScript

• UI: Radix UI + Tailwind CSS

• コンポーネント管理: LearningRecordTable.tsx, Pagination.tsx

🔧 実装概要

1. データをページ単位で表示するための処理

一覧表示している records をソートし、ページ単位で .slice() を使って分割表示します：

const [currentPage, setCurrentPage] = useState(1);
const recordsPerPage = 10;

const paginatedRecords = sortedRecords.slice(
  (currentPage - 1) * recordsPerPage,
  currentPage * recordsPerPage
);

2. ページネーションUIの作成

今回は、アプリのメインカラーであるピンクをベースにスタイルを調整したカスタムUIを実装しました。

<button
  className={`w-8 h-8 rounded-full text-center border ${
    currentPage === i + 1
      ? "bg-pink-500 text-white border-pink-500"
      : "text-pink-700 border-pink-200 hover:bg-pink-100"
  }`}
>
  {i + 1}
</button>

前へ / 次へ ボタンも同様にアクセシビリティと見た目を両立したスタイルにしています。

3. ページ番号の状態管理

現在のページは useState で管理しています：

const [currentPage, setCurrentPage] = useState(1);

ページ切り替えのたびに再レンダリングされ、正しく records が反映されるようになっています。

🎨 UIイメージ

• ページ数に応じたボタン表示

• 現在のページが色付きでハイライト

• 前後ボタンで簡単にページ移動

• レスポンシブ対応済み

✨ まとめ

ページネーションを追加することで、一覧画面の可読性と操作性が向上しました。React + TailwindCSS の構成でも、少しの工夫で「使いやすく、見やすいUI」を実現できます。特にデータ量が多くなってきた場合、ページネーションはUX向上のために欠かせない要素です。