ページネーション

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 CustomPagination from '../components/custom-pagination';
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          page: state.page || [],
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        <CustomPagination
35          defaultRefinement={(router.query.page as string) || 1}
36        />
37      </div>
38    </InstantSearch>
39  );
40};
41
42export default SearchPagination;