Next.jsアプリへのページネーション追加

ユーザーが異なるページを移動し、すべての請求書を閲覧できるようにするため、検索機能と同様にURLパラメータを使用したページネーションの実装。

プロジェクトに戻る

ステップ 1

1. Pagination コンポーネントに移動すると、これはクライアントコンポーネントであることがわかります。データベースの秘密情報を公開しないよう、クライアントサイドでデータを取得するのは避けてください。代わりに、サーバー側でデータを取得し、コンポーネントにプロップとして渡します。
2. app/dashboard/invoices/page.tsx で、新しい関数 fetchInvoicesPages をインポートし、searchParams から検索クエリを引数として渡します。
   • fetchInvoicesPages は検索クエリに基づいて総ページ数を計算します。例えば、該当する請求書が12件あり、1ページあたり6件表示する場合、総ページ数は2となります。
3. totalPages コンポーネントに <Pagination/> プロップを渡します。

ステップ 2

1. app/ui/invoices/pagination.tsx に移動します。
2. usePathname と useSearchParams フックをインポートします。
3. これらのフックを使用して現在のページを取得し、新しいページを設定します。
4. このコンポーネント内のコードのコメントアウトを解除します。

注意

<Pagination/> のロジックがまだ実装されていないため、アプリケーションが一時的に動作しなくなる場合があります。後ほど対応します。

ステップ 3

1. <Pagination> コンポーネント内で、新しい関数 createPageURL を作成します。
2. 検索機能と同様に、URLSearchParams を利用して新しいページ番号を設定します。
3. URL文字列の構築には pathName を使用します。
4. allPages 変数のコメントアウトを解除します。

ステップ 4

最終ステップ - ユーザーが新しい検索クエリを入力した際に、ページ番号を1にリセットすることが重要です。これを実現するには、handleSearch 内の app/ui/search.tsx 関数を更新します。

実践例