https://github.com/bryaneaton13/shadcn-next-link-pagination

Use shadcn pagination components to navigate and update URL params
https://github.com/bryaneaton13/shadcn-next-link-pagination

Last synced: about 2 months ago
JSON representation

Use shadcn pagination components to navigate and update URL params

• Host: GitHub
• URL: https://github.com/bryaneaton13/shadcn-next-link-pagination
• Owner: bryaneaton13
• License: mit
• Created: 2024-07-30T20:10:53.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-10T00:06:02.000Z (5 months ago)
• Last Synced: 2024-08-10T01:23:36.916Z (5 months ago)
• Language: TypeScript
• Homepage: https://shadcn-next-link-pagination.vercel.app
• Size: 1 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-shadcn-ui - Nextjs Link Pagination - Use shadcn pagination components to navigate and update URL params (Components)
• awesome-shadcn-ui - Nextjs Link Pagination - Use shadcn pagination components to navigate and update URL params (Components)

README

        
## 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.

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

![See it](PaginationExample.gif)

## Getting Started with

1. Copy the code located in [`pagination-with-links.tsx`](https://github.com/bryaneaton13/shadcn-next-link-pagination/blob/main/components/ui/pagination-with-links.tsx) and paste it into your project.

2. Use the code

## Example

Simple Example

```tsx

```

Example with Nextjs Server Components

```tsx

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 (

    


      {/* Other code */}

      

    

  );

}

```