キーワード検索

1import React from 'react';
2import { searchClient } from '../algolia/client';
3import { InstantSearch } from 'react-instantsearch-dom';
4import CustomHits from '../components/custom-hits';
5import CustomSearchBox from '../components/custom-search-box';
6import { useRouter } from 'next/router';
7import { SearchState } from 'react-instantsearch-core';
8
9const SearchHits = () => {
10  const router = useRouter();
11  const updateQueryParams = (state: SearchState) => {
12    router.replace(
13      {
14        query: {
15          id: router.query.id,
16          query: state.query || [],
17        },
18      },
19      undefined,
20      {
21        shallow: true,
22      }
23    );
24  };
25
26  return (
27    <InstantSearch
28      onSearchStateChange={updateQueryParams}
29      searchClient={searchClient}
30      indexName="posts"
31    >
32      <div className="mb-6">
33        <CustomSearchBox
34          defaultRefinement={(router.query.query as string) || ''}
35        />
36      </div>
37      <CustomHits />
38    </InstantSearch>
39  );
40};
41
42export default SearchHits;