bryaneaton13 / shadcn-next-link-pagination

Use shadcn pagination components to navigate and update URL params

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

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

shadcn-next-link-pagination's Issues

Pagination Issue: Next/Prev Button Navigation Skips Pages

When using the pagination feature on the page, the following issue is observed:

1. Next Button:

   • Tapping the "Next" button navigates correctly from page 1 to 2 and 3. However, after reaching the last page (page 50), it does not continue correctly.

2. Prev Button:

   • Tapping the "Prev" button navigates from page 49 to 48, but instead of continuing back to page 1, it behaves unexpectedly.

This issue only occurs when using the "Next" and "Prev" buttons. If the searchParams are manually changed in the URL, the pagination functions as expected, allowing navigation to all pages without issues.

Steps to Reproduce:

1. Open the page with pagination.
2. Click the "Next" button multiple times until reaching the last page.
3. Observe the behavior at the last page.
4. Click the "Prev" button and observe the behavior.

Expected Behavior:

• The "Next" button should navigate through pages sequentially, and after reaching the last page, it should not loop or skip.
• The "Prev" button should navigate back sequentially without skipping any pages.

Actual Behavior:

• The "Next" button skips to the last page.
• The "Prev" button does not navigate correctly after page 48.

Additional Information:

• The issue does not occur when manually adjusting the searchParams in the URL.
• Please provide any relevant logs or screenshots if available.