yarn add next-url-pagination
    # or
    npm install next-url-pagination

// ...
import { useUrlPagination } from 'url-pagination';

function MyComponent () {
  const pagination = useUrlPagination({ perPage: 6 });

  // use a data fetching library of your choice
  const { data, error } = useSWR<Response>(
    `/some-api/posts?offset=${pagination.offset}&limit=${pagination.perPage}`
  );
  
  return (
    <>
      <PostsList posts={data.posts}/>
      <MyPagination total={data.total} page={pagination.page} onChange={pagination.onChange}  />
    </>
  )
}

// pass to useUrlPagination
type UseUrlPaginationArgs = {
  perPage: number; // number of records per page
  page?: number = 0; // specify initial page or make the component controlled (if the value changes) 
  scrollToTop?: boolean = false; // scroll page to the top upon navigation
  hotkeys?: boolean = false; // use left/right arrows and page up/down to navigation through pagination
  total?: number; // specify total records, optional, but recommended, without it hotkey pagination won't know when the last page is reached
  pageKey?: string = 'page'; // under what key the current page is going to appear in URL
  perPageKey?: string 'size'; // under what key the page size is going to appear in URL
  shallowNavigation?: boolean = true; // if true performs shallow Next.js router navigation upon changes
  includeHref?: boolean = false; // this argument is passed through to returned results
}

// get as a result
type PageInfo = {
  perPage: number; // size of the page, how many records each page contains
  offset: number; // what's the offset from the start
  page: number; // current page, maybe seen as redundant because there's `offset`, but different APIs use different params, it's here for convenience
  onChange: (page: number) => void; // function to call when a page changes
  onPerPageChange: (perPage: number) => void;  // function to call when a page size changes
  pageKey: string; // see UseUrlPaginationArgs, passed through without changes
  hrefBuilder: (pageIndex: number) => string; // call this function to build a new URL path based on page number
  includeHref: boolean; // passed through from arguments
}

// pass to usePagination
type UsePaginationArgs = {
  perPage: number; // number of records per page
  page?: number = 0; // specify initial page or make the component controlled (if the value changes) 
  scrollToTop?: boolean = false; // scroll page to the top upon navigation
  hotkeys?: boolean = false; // use left/right arrows and page up/down to navigation through pagination
  total?: number; // specify total records, optional, but recommended, without it hotkey pagination won't know when the last page is reached
}

calculatePage = ({
  offset: number;
  perPage: number;
}): number

import useUrlPagination from 'url-pagination/useUrlPagination';
import usePagination from 'url-pagination/usePagination';
// ...