🔎

ゼロから学ぶ React, Next.js⑱【Learn Next.js】Chapter11

2024/05/25に公開

Next.js

React

tech

【Chapter11】検索とページネーションの追加

前の章では、ストリーミングを使用してダッシュボードの初期読み込みパフォーマンスを改善しました。次は、/invoicesページに移動して、検索とページネーションを追加する方法を学びましょう！

この章で扱うトピック

⏭️ Next.jsのAPI（searchParams、usePathname、useRouter）の使用方法を学ぶ
🔎 URLの検索パラメータを使用して検索とページネーションを実装する

開始コード

/dashboard/invoices/page.tsxファイルの中に、以下のコードを貼り付けてください：

/app/dashboard/invoices/page.tsx

import Pagination from '@/app/ui/invoices/pagination';
import Search from '@/app/ui/search';
import Table from '@/app/ui/invoices/table';
import { CreateInvoice } from '@/app/ui/invoices/buttons';
import { lusitana } from '@/app/ui/fonts';
import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
import { Suspense } from 'react';
 
export default async function Page() {
  return (
    <div className="w-full">
      <div className="flex w-full items-center justify-between">
        <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
      </div>
      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Search invoices..." />
        <CreateInvoice />
      </div>
      {/*  <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense> */}
      <div className="mt-5 flex w-full justify-center">
        {/* <Pagination totalPages={totalPages} /> */}
      </div>
    </div>
  );
}

ページと作業するコンポーネントを時間をかけて理解してみましょう。

<Search/>：ユーザーが特定の請求書を検索できるようにします。
<Pagination/>：ユーザーが請求書のページ間を移動できるようにします。
<Table/>：請求書を表示します。

検索機能はクライアントとサーバーにまたがります。ユーザーがクライアント上で請求書を検索すると、URLパラメータが更新され、サーバー上でデータがフェッチされ、新しいデータでテーブルがサーバー上で再レンダリングされます。

URLの検索パラメータを使用する理由

上記のように、検索状態を管理するためにURLの検索パラメータを使用します。クライアント側で状態管理している方には、このパターンは新しい方法かもしれません。

URLパラメータで検索を実装することには、いくつかの利点があります：

ブックマーク可能で共有可能なURL：検索パラメータはURLにあるため、ユーザーは検索クエリやフィルターを含むアプリケーションの現在の状態をブックマークして、将来の参照や共有に使用できます。
サーバーサイドレンダリングと初期読み込み：URLパラメータは、初期状態をレンダリングするためにサーバー上で直接使用できるため、サーバーレンダリングの処理が容易になります。
分析とトラッキング：検索クエリとフィルターをURLに直接含めることで、追加のクライアント側ロジックを必要とせずに、ユーザーの行動を追跡しやすくなります。

検索機能の追加

検索機能を実装するために使用するNext.jsのクライアントフックは次のとおりです：

useSearchParams - 現在のURLのパラメータにアクセスできます。例えば、/dashboard/invoices?page=1&query=pendingというURLの検索パラメータは次のようになります：{page: '1', query: 'pending'}。
usePathname - 現在のURLのパス名を読み取ることができます。例えば、/dashboard/invoicesというルートでは、usePathnameは'/dashboard/invoices'を返します。
useRouter - クライアントコンポーネント内でプログラムによってルート間のナビゲーションを可能にします。使用できるメソッドは複数あります。

実装の手順の概要は次のとおりです：

ユーザーの入力をキャプチャする。
検索パラメータでURLを更新する。
入力フィールドとURLを同期させる。
検索クエリを反映するようにテーブルを更新する。

1. ユーザーの入力をキャプチャする

<Search>コンポーネント（/app/ui/search.tsx）に移動すると、以下のことがわかります：

"use client" - これはクライアントコンポーネントであり、イベントリスナーとフックを使用できることを意味します。
<input> - これは検索入力です。

新しいhandleSearch関数を作成し、<input>要素にonChangeリスナーを追加します。onChangeは、入力値が変更されるたびにhandleSearchを呼び出します。

/app/ui/search.tsx

 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 
 export default function Search({ placeholder }: { placeholder: string }) {
+  function handleSearch(term: string) {
+    console.log(term);
+  }
 
   return (
     <div className="relative flex flex-1 flex-shrink-0">
       <label htmlFor="search" className="sr-only">
         Search
       </label>
       <input
         className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10  text-sm outline-2 placeholder:text-gray-500"
         placeholder={placeholder}
+        onChange={(e) => {
+          handleSearch(e.target.value);
+        }}
       />
       <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
     </div>
   );
 }

開発者ツールでコンソールを開き、検索フィールドに入力して正しく動作していることをテストします。検索語がコンソールに記録されるはずです。

素晴らしい！ユーザーの検索入力をキャプチャしています。次に、検索語でURLを更新する必要があります。

2. 検索パラメータでURLを更新する

'next/navigation'からuseSearchParamsフックをインポートし、変数に割り当てます：

/app/ui/search.tsx

 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useSearchParams } from 'next/navigation';
 
 export default function Search() {
+  const searchParams = useSearchParams();
 
   function handleSearch(term: string) {
     console.log(term);
   }
   // ...
 }

handleSearchの中で、新しいsearchParams変数を使用してURLSearchParamsのインスタンスを作成します。

/app/ui/search.tsx

 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { useSearchParams } from 'next/navigation';
 
 export default function Search() {
   const searchParams = useSearchParams();
 
   function handleSearch(term: string) {
+    const params = new URLSearchParams(searchParams);
   }
   // ...
 }

URLSearchParamsは、URLクエリパラメータを操作するためのユーティリティメソッドを提供するWeb APIです。複雑な文字列リテラルを作成する代わりに、これを使用して?page=1&query=aのようなパラメータ文字列を取得できます。

次に、ユーザーの入力に基づいてパラメータ文字列をsetを使用して設定します。入力が空の場合は、deleteを使用して削除します：

/app/ui/search.tsx

 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { useSearchParams } from 'next/navigation';
 
 export default function Search() {
   const searchParams = useSearchParams();
 
   function handleSearch(term: string) {
     const params = new URLSearchParams(searchParams);
+    if (term) {
+      params.set('query', term);
+    } else {
+      params.delete('query');
+    }
   }
   // ...
 }

クエリ文字列ができたので、Next.jsのuseRouterとusePathnameフックを使用してURLを更新できます。

'next/navigation'からuseRouterとusePathnameをインポートし、handleSearchの中でuseRouter()のreplaceメソッドを使用します：

/app/ui/search.tsx

 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useSearchParams, usePathname, useRouter } from 'next/navigation';
 
 export default function Search() {
   const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { replace } = useRouter();
 
   function handleSearch(term: string) {
     const params = new URLSearchParams(searchParams);
     if (term) {
       params.set('query', term);
     } else {
       params.delete('query');
     }
+    replace(`${pathname}?${params.toString()}`);
   }
 }

ここで起こっていることの内訳は次のとおりです：

${pathname}は現在のパスです。この場合は、"/dashboard/invoices"になります。
ユーザーが検索バーに入力すると、params.toString()はこの入力をURL対応の形式に変換します。
replace(${pathname}?${params.toString()})は、ユーザーの検索データでURLを更新します。例えば、ユーザーが「Lee」を検索すると、/dashboard/invoices?query=leeになります。

Next.jsのクライアントサイドナビゲーションのおかげで、ページの再読み込みなしでURLが更新されます（ページ間のナビゲーションの章で学習しました）。

3. URLと入力を同期させる

入力フィールドがURLと同期し、共有時に入力されるようにするには、searchParamsから読み取ったdefaultValueをinputに渡すことができます：

/app/ui/search.tsx

 <input
   className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
   placeholder={placeholder}
   onChange={(e) => {
     handleSearch(e.target.value);
   }}
+  defaultValue={searchParams.get('query')?.toString()}
 />

4. テーブルの更新

最後に、検索クエリを反映するようにテーブルコンポーネントを更新する必要があります。

請求書ページに戻ります。

pageコンポーネントはsearchParamsというpropを受け取ることができるため、現在のURLパラメータを<Table>コンポーネントに渡すことができます。

/app/dashboard/invoices/page.tsx

 import Pagination from '@/app/ui/invoices/pagination';
 import Search from '@/app/ui/search';
 import Table from '@/app/ui/invoices/table';
 import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import { lusitana } from '@/app/ui/fonts';
 import { Suspense } from 'react';
 import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
 
+export default async function Page({
+  searchParams,
+}: {
+  searchParams?: {
+    query?: string;
+   page?: string;
+  };
+}) {
+  const query = searchParams?.query || '';
+  const currentPage = Number(searchParams?.page) || 1;
 
   return (
     <div className="w-full">
       <div className="flex w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
       </div>
       <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
         <Search placeholder="Search invoices..." />
         <CreateInvoice />
       </div>
+      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
+        <Table query={query} currentPage={currentPage} />
+      </Suspense>
       <div className="mt-5 flex w-full justify-center">
         {/* <Pagination totalPages={totalPages} /> */}
       </div>
     </div>
   );
 }

<Table>コンポーネントに移動すると、queryとcurrentPageの2つのpropがfetchFilteredInvoices()関数に渡されていることがわかります。この関数は、クエリに一致する請求書を返します。

/app/ui/invoices/table.tsx

// ...
export default async function InvoicesTable({
  query,
  currentPage,
}: {
  query: string;
  currentPage: number;
}) {
  const invoices = await fetchFilteredInvoices(query, currentPage);
  // ...
}

これらの変更を行ったら、テストしてみてください。用語を検索すると、URLが更新され、サーバーに新しいリクエストが送信され、サーバー上でデータがフェッチされ、クエリに一致する請求書のみが返されます。

useSearchParams()hookとsearchParamspropのどちらを使用するか検索パラメータを抽出する2つの異なる方法を使用していることに気づいたかもしれません。どちらを使用するかは、クライアントとサーバーのどちらで作業しているかによって異なります。

<Search>はクライアントコンポーネントなので、useSearchParams()フックを使用してクライアントからパラメータにアクセスしました。

<Table>は独自のデータをフェッチするサーバーコンポーネントなので、ページからsearchParamsプロップをコンポーネントに渡すことができます。
一般的なルールとして、クライアントからパラメータを読み取る場合は、useSearchParams()フックを使用します。これにより、サーバーに戻る必要がなくなります。

ベストプラクティス：デバウンス

おめでとうございます！Next.jsを使用して検索を実装しました！ただし、最適化するために実行できることがあります。

handleSearch関数の中に、次のconsole.logを追加します：

/app/ui/search.tsx

 function handleSearch(term: string) {
+  console.log(`Searching... ${term}`);
 
   const params = new URLSearchParams(searchParams);
   if (term) {
     params.set('query', term);
   } else {
     params.delete('query');
   }
   replace(`${pathname}?${params.toString()}`);
 }

次に、検索バーに「Emil」と入力し、開発者ツールのコンソールを確認します。何が起こっていますか？

Dev Tools Console

Searching... E
Searching... Em
Searching... Emi
Searching... Emil

キーストロークごとにURLを更新しているため、キーストロークごとにデータベースにクエリを実行しています！アプリケーションが小規模なので、これは問題ありません。ただし、アプリケーションに何千人ものユーザーがいて、各ユーザーがキーストロークごとにデータベースに新しいリクエストを送信していると想像してください。

デバウンスは、関数の発火率を制限するプログラミング手法です。この場合、ユーザーが入力を停止したときにのみデータベースにクエリを実行する必要があります。

デバウンスの仕組み

トリガーイベント：デバウンスする必要があるイベント（検索ボックスでのキーストロークなど）が発生すると、タイマーが開始します。
待機：タイマーの期限が切れる前に新しいイベントが発生した場合、タイマーはリセットされます。
実行：タイマーがカウントダウンの終わりに達すると、デバウンスされた関数が実行されます。

独自のデバウンス関数を手動で作成するなど、いくつかの方法でデバウンスを実装できます。簡単にするために、use-debounceというライブラリを使用します。

use-debounceをインストールします：

Terminal

npm i use-debounce

<Search>コンポーネントで、useDebouncedCallbackという関数をインポートします：

/app/ui/search.tsx

 // ...
+import { useDebouncedCallback } from 'use-debounce';
 
 // Search コンポーネントの中...
+const handleSearch = useDebouncedCallback((term) => {
   console.log(`Searching... ${term}`);
 
   const params = new URLSearchParams(searchParams);
   if (term) {
     params.set('query', term);
   } else {
     params.delete('query');
   }
   replace(`${pathname}?${params.toString()}`);
+}, 300);

この関数はhandleSearchの内容をラップし、ユーザーが入力を停止した後に特定の時間（300ms）が経過した場合にのみコードを実行します。

ここで、再び検索バーに入力し、開発者ツールでコンソールを開きます。次のように表示されるはずです：

Dev Tools Console

Searching... Emil

デバウンスを使用することで、データベースに送信するリクエストの数を減らし、リソースを節約できます。

クイズの時間です！
知識をテストし、学んだことを確認しましょう。

検索機能でデバウンスはどのような問題を解決しますか？

A. データベースクエリを高速化する
B. URLをブックマーク可能にする
C. キーストロークごとに新しいデータベースクエリが実行されるのを防ぐ
D. SEO最適化に役立つ

解答

C. キーストロークごとに新しいデータベースクエリが実行されるのを防ぐ
デバウンスすることで、キーを押すたびに新しいデータベースクエリが発生するのを防ぎ、リソースを節約できる。

ページネーションの追加

検索機能を導入した後、テーブルには一度に6つの請求書のみが表示されることに気づくでしょう。これは、data.tsのfetchFilteredInvoices()関数が、ページごとに最大6つの請求書を返すためです。

ページネーションを追加すると、ユーザーは異なるページを移動して、すべての請求書を表示できます。検索で行ったのと同じように、URLパラメータを使用してページネーションを実装する方法を見てみましょう。

<Pagination/>コンポーネントに移動すると、それがクライアントコンポーネントであることがわかります。データベースのシークレットが公開されてしまうため、クライアント上でデータをフェッチしたくありません（APIレイヤーを使用していないことを思い出してください）。代わりに、サーバー上でデータをフェッチし、それをpropとしてコンポーネントに渡すことができます。

/dashboard/invoices/page.tsxで、fetchInvoicesPagesという新しい関数をインポートし、searchParamsからqueryを引数として渡します：

/app/dashboard/invoices/page.tsx

 // ...
+import { fetchInvoicesPages } from '@/app/lib/data';
 
 export default async function Page({
   searchParams,
 }: {
   searchParams?: {
     query?: string,
     page?: string,
   },
 }) {
   const query = searchParams?.query || '';
   const currentPage = Number(searchParams?.page) || 1;
 
+  const totalPages = await fetchInvoicesPages(query);
 
   return (
     // ...
   );
 }

fetchInvoicesPagesは、検索クエリに基づいてページの総数を返します。例えば、検索クエリに一致する請求書が12件あり、各ページに6件の請求書が表示される場合、ページの総数は2になります。

次に、totalPagespropを<Pagination/>コンポーネントに渡します：

/app/dashboard/invoices/page.tsx

 // ...
 
 export default async function Page({
   searchParams,
 }: {
   searchParams?: {
     query?: string;
     page?: string;
   };
 }) {
   const query = searchParams?.query || '';
   const currentPage = Number(searchParams?.page) || 1;
 
   const totalPages = await fetchInvoicesPages(query);
 
   return (
     <div className="w-full">
       <div className="flex w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
       </div>
       <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
         <Search placeholder="Search invoices..." />
         <CreateInvoice />
       </div>
       <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
         <Table query={query} currentPage={currentPage} />
       </Suspense>
       <div className="mt-5 flex w-full justify-center">
+       <Pagination totalPages={totalPages} />
       </div>
     </div>
   );
 }

<Pagination/>コンポーネントに移動し、usePathnameとuseSearchParamsフックをインポートします。これを使用して、現在のページを取得し、新しいページを設定します。また、このコンポーネントのコードのコメントを外してください。<Pagination/>のロジックをまだ実装していないので、アプリケーションは一時的に壊れます。それでは、実装しましょう！

/app/ui/invoices/pagination.tsx

 'use client';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { generatePagination } from '@/app/lib/utils';
+import { usePathname, useSearchParams } from 'next/navigation';
 
 export default function Pagination({ totalPages }: { totalPages: number }) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const currentPage = Number(searchParams.get('page')) || 1;
 
   // ...
 }

次に、<Pagination>コンポーネントの中にcreatePageURLという新しい関数を作成します。検索と同様に、URLSearchParamsを使用して新しいページ番号を設定し、pathNameを使用してURL文字列を作成します。

/app/ui/invoices/pagination.tsx

 'use client';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { generatePagination } from '@/app/lib/utils';
 import { usePathname, useSearchParams } from 'next/navigation';
 
 export default function Pagination({ totalPages }: { totalPages: number }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const currentPage = Number(searchParams.get('page')) || 1;
  
+  const createPageURL = (pageNumber: number | string) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('page', pageNumber.toString());
+    return `${pathname}?${params.toString()}`;
+  };
 
   // ...
 }

ここで起こっていることの内訳は次のとおりです：

createPageURLは現在の検索パラメータのインスタンスを作成します。
次に、「page」パラメータを指定されたページ番号に更新します。
最後に、pathnameと更新された検索パラメータを使用して完全なURLを構築します。

<Pagination>コンポーネントの残りの部分は、スタイリングとさまざまな状態（最初、最後、アクティブ、無効など）を扱います。このコースでは詳しく説明しませんが、createPageURLが呼び出されている場所を確認するためにコードを見てください。

最後に、ユーザーが新しい検索クエリを入力したときに、ページ番号を1にリセットする必要があります。これは、<Search>コンポーネントのhandleSearch関数を更新することで実行できます：

/app/ui/search.tsx

 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useDebouncedCallback } from 'use-debounce';
 
 export default function Search({ placeholder }: { placeholder: string }) {
   const searchParams = useSearchParams();
   const { replace } = useRouter();
   const pathname = usePathname();
 
   const handleSearch = useDebouncedCallback((term) => {
     const params = new URLSearchParams(searchParams);
+    params.set('page', '1');
     if (term) {
       params.set('query', term);
     } else {
       params.delete('query');
     }
     replace(`${pathname}?${params.toString()}`);
   }, 300);
 
   // ...
 }

まとめ

おめでとうございます！URLパラメータとNext.js APIを使用して、検索とページネーションを実装しました。

要約すると、この章では：

クライアントの状態ではなく、URLの検索パラメータで検索とページネーションを処理しました。
サーバー上でデータをフェッチしました。
より滑らかなクライアントサイドの遷移のために、useRouterルーターフックを使用しています。

これらのパターンは、クライアントサイドのReactを使用する場合とは異なるかもしれませんが、URLの検索パラメータを使用し、この状態をサーバーに移行することの利点を理解できたことでしょう。

ゼロから学ぶ React, Next.js⑱【Learn Next.js】Chapter11

【Chapter11】検索とページネーションの追加

この章で扱うトピック

開始コード

URLの検索パラメータを使用する理由

検索機能の追加

1. ユーザーの入力をキャプチャする

2. 検索パラメータでURLを更新する

3. URLと入力を同期させる

4. テーブルの更新

ベストプラクティス：デバウンス

ページネーションの追加

まとめ

次の章

Discussion

【Chapter11】 検索とページネーションの追加

この章で扱うトピック

開始コード

URLの検索パラメータを使用する理由

検索機能の追加

1. ユーザーの入力をキャプチャする

2. 検索パラメータでURLを更新する

3. URLと入力を同期させる

4. テーブルの更新

ベストプラクティス：デバウンス

ページネーションの追加

まとめ

次の章

Discussion

【Chapter11】検索とページネーションの追加