ルーティングによる検索

最終更新: 2022年02月09日

概要

TwitterやYouTube、Googleなどの検索では検索に使われるキーワードや条件がURLにクエリーパラメータとして付与されます。たとえば React というキーワードでGoogle検索した場合、以下のようなURLに遷移します。

https://www.google.com/search?q=react

これによりこのURLにアクセすることで常に同じキーワードの検索結果を表示することができます。このクエリーパラメータに基づいて検索結果を表示する実装は現在主流となっています。

したがって検索結果の表示は以下のフローで行われます。

  1. 検索フォームに入力して検索ボタンをクリック
  2. クエリーパラメータ付きのURLに遷移
  3. クエリーパラメータに基づいて検索結果を表示

実装

検索条件をクエリパラメーターに反映する

const Home = () => { const router = useRouter(); const updateQueryParams = (state: SearchState) => { router.push( { query: { q: state.query || [], hitsPerPage: state.hitsPerPage || [], page: state.page || [], sortBy: state.sortBy || [], ...state.refinementList, }, }, undefined, { shallow: true, } ); }; return ( <InstantSearch onSearchStateChange={updateQueryParams} searchClient={searchClient} indexName="dev_users_desc" >...</InstantSearch> ); }

InstantSearchonSearchStateChange検索条件が変更されるたびに実行されます。そのタイミングで Next.js の router を使ってクエリパラメーターつきのURLに遷移しています。shallowtrue にすることでページを置き換えずにURLの変更のみをおこなっています。

クエリパラメーターを検索条件に適用する

各ウィジェットの defaultRefinement にクエリパラメーターの値をセットします。

一例
// 検索ボックス <CustomSearchBox defaultRefinement={router.query.q as string} /> // ページング <CustomPagination defaultRefinement={Number(router.query.page) || 1} />

それぞれの初期値のセットは各ウィジェットのFlock記事を参照してください。