Pagination with Nextjs Links

Uses Nextjs Link component for pagination.
Applies search parameters for 
page
and 
limit
to the current URL.
https://example.com?page=1&limit=20
Click around and watch the URL change!

New: You can now use navigationMode="router"to navigate with
router.push() instead of links. This enables loading indicators while the page is changing!

With <Link />

With router.push()






Try it out





Simple Example

<PaginationWithLinks
  page={1}
  pageSize={20}
  totalCount={500}
/>

Real Example

export default async function Example({ searchParams }) {
  const page = parseInt(searchParams.get("page") || "1");
  const pageSize = parseInt(searchParams.get("pageSize") || "20");
  
  const [data, count] = await getDataWithCount();

  return (
    <div>
      {/* Other code */}
      <PaginationWithLinks
        page={page}
        pageSize={pageSize}
        totalCount={count}
      />
    </div>
  );
}