検索機能の開発

理論

検索機能を実装する前に、以下のクライアントフックを理解することが重要。

• useSearchParams;
  • 現在のURLパラメータへのアクセスを提供;
  • 例: URL /dashboard/invoices?page=1&query=pending の場合、{page: '1', query: 'pending'} を返す。
• usePathname;
  • 現在のURLのパス名を取得;
  • 例: ルート domain/dashboard/invoices の場合、usePathname は "/dashboard/invoices" を返す。
• useRouter。
  • クライアントコンポーネント内でルート間のナビゲーションを支援し、複数のメソッドを提供。

実装手順の概要:

1. ユーザー入力の取得;
2. 検索パラメータでURLを更新;
3. 入力フィールドとURLの同期維持;
4. 検索クエリに応じてテーブルを更新。

プロジェクトに戻る

1. ユーザー入力の取得

1. Searchコンポーネント（app/ui/search.tsx）を開く；
2. 'use client'の使用を確認し、イベントリスナーやフックが利用可能であることを把握；
3. 入力が変更されるたびにトリガーされるhandleSearch関数を利用。

実装後、ブラウザのデベロッパーコンソールを開く。入力フィールドに入力したテキストがブラウザコンソールに反映されていることを確認。

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

1. useSearchParams から 'next/navigation' フックをインポートし、変数に代入；
2. handleSearch 関数内で、先ほど定義した変数（URLSearchParams）を使って searchParams の新しいインスタンスを作成。このユーティリティはURLクエリパラメータを操作するメソッドを提供；
3. ユーザーの入力に基づいてパラメータ文字列を設定。入力が空の場合は削除；
4. 'next/navigation' から useRouter と usePathname フックを利用し、handleSearch 内で useRouter() の replace メソッドを使用。
   • ${pathname} は現在のパスを表し、例："/dashboard/invoices"；
   • ユーザーが検索バーに入力すると、params.toString() が入力内容をURLフレンドリーな形式に変換；
   • replace(${pathname}?${params.toString()}) でユーザーの検索データを含むURLに更新（例：/dashboard/invoices?query=qwerty）。

Next.jsのクライアントサイドナビゲーションにより、ページリロードなしでURLが更新。

実装後、入力欄に入力したテキストがURLに反映。

3. 入力欄とURLの同期を維持

URLと入力欄が一致し、共有時にも自動入力されるように、defaultValue から値を読み込んで searchParams を使用。

4. 検索クエリを反映するためのテーブルの更新

最後に、Tableコンポーネントを検索クエリに対応させて更新します。ページコンポーネントはsearchParamsというプロップを受け取ります。現在のURLパラメータを<Table>コンポーネントに渡してください。

Tableコンポーネントのコメントアウトを解除するのを忘れないでください。

素晴らしいです！アプリに検索機能が正常に追加されました。ぜひ試してみてください。うまく動作しますか？😊

次の章では、ページ上に現在6件の請求書しか表示されていないため、ページネーションについて詳しく解説します。

実践例