README.md

Shadcn Nextjs Link Pagination

Use shadcn pagination components to create links that will dynamically update based on the current page and the total number of pages.

You can use Nextjs server components to control the page and pageSize parameters that get updated in the URL.

The first page stays canonical without a page query param:

https://example.com?pageSize=20

Subsequent pages include page as expected:

https://example.com?page=2&pageSize=20

Getting Started with

1. Copy the code located in pagination-with-links.tsx and paste it into your project.
2. Use the code

Example

Simple Example

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

Example with router.push navigation (this allows you to show a loading indicator while the page is changing)

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

Example with Nextjs Server Components

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>
  );
}