ページごとの表示件数

1import { useRouter } from 'next/router';
2import React from 'react';
3import { InstantSearch } from 'react-instantsearch-dom';
4import { searchClient } from '../algolia/client';
5import CustomHits from '../components/custom-hits';
6import CustomHitsPerPage from '../components/custom-hits-per-page';
7import { SearchState } from 'react-instantsearch-core';
8
9const SearchPagination = () => {
10  const router = useRouter();
11  const updateQueryParams = (state: SearchState) => {
12    router.replace(
13      {
14        query: {
15          id: router.query.id,
16          hitsPerPage: state.hitsPerPage,
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      <CustomHits />
33      <div className="mt-6">
34        <CustomHitsPerPage
35          items={[
36            {
37              value: 3,
38              label: '3',
39            },
40            {
41              value: 5,
42              label: '5',
43            },
44            {
45              value: 10,
46              label: '10',
47            },
48          ]}
49          defaultRefinement={Number(router.query.hitsPerPage as string) || 3}
50        />
51      </div>
52    </InstantSearch>
53  );
54};
55
56export default SearchPagination;