Shadcn Next Link Pagination

Seamless Shadcn Pagination for Next.js with Dynamic URL Updates

Integrate Shadcn UI pagination seamlessly into your Next.js projects. This component leverages Next.js Link components to create navigation that dynamically updates URL search parameters like page and pageSize. It's designed for server components, ensuring pagination state is reflected in the URL for easy sharing and bookmarking of specific data views. This enhances user experience when navigating through large datasets.

Features:

• Shadcn UI Component Usage: Leverages Shadcn's pagination components for styling and structure.
• Next.js Link Integration: Uses Next.js Link for optimized client-side navigation, preventing full page reloads.
• Dynamic URL Parameter Management: Automatically updates page and pageSize (or limit) query parameters in the URL.
• Server Component Compatibility: Works effectively with Next.js Server Components, allowing data fetching based on URL state.
• Configurable Pagination State: Supports page, pageSize, and totalCount props to control pagination behavior.
• Easy Implementation: Provides a copy-pasteable pagination-with-links.tsx component for quick setup.
• URL-Driven State: Ensures pagination state is directly tied to the URL, facilitating shareable links.

Summary:

This tool provides a React component for Next.js that simplifies adding Shadcn-styled pagination with dynamic URL updates. It's ideal for applications using server components where pagination state (page number, items per page) needs to be managed via URL parameters. By integrating Next.js Link components, it ensures smooth navigation and makes it easy for users to share or bookmark specific paginated views.