fix: prevent disabled pagination buttons from triggering navigation

src/components/custom/pagination.tsx

@@ -1,15 +1,32 @@
 'use client';
 
+import { useEffect } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationNext } from '../ui/pagination';
 
 export default function CustomPagination({ totalPages }: { totalPages: number }) {
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const router = useRouter();
-    const currentPage = Number(searchParams.get('page')) || 1;
 
-    const createPageURL = (pageNumber: number | string) => {
+    const safeTotalPages = Math.max(totalPages, 1);
+    const rawPage = Number(searchParams.get('page')) || 1;
+    const currentPage = Math.min(Math.max(rawPage, 1), safeTotalPages);
+
+    // Keep the URL in sync with the clamped page so a stale/out-of-range
+    // ?page value never lingers after the invalid state is displayed once.
+    useEffect(() => {
+        if (rawPage === currentPage) return;
+        const params = new URLSearchParams(searchParams);
+        params.set('page', currentPage.toString());
+        router.replace(`${pathname}?${params.toString()}`);
+    }, [rawPage, currentPage, pathname, router, searchParams]);
+
+    const isFirstPage = currentPage <= 1;
+    const isLastPage = currentPage >= safeTotalPages;
+
+    const createPageURL = (pageNumber: number) => {
+        if (pageNumber < 1 || pageNumber > safeTotalPages) return;
         const params = new URLSearchParams(searchParams);
         params.set('page', pageNumber.toString());
         router.push(`${pathname}?${params.toString()}`);
@@ -21,8 +38,8 @@ export default function CustomPagination({ totalPages }: { totalPages: number })
                 {/* Previous Button */}
                 <PaginationItem>
                     <PaginationPrevious
-                        aria-disabled={currentPage === 1}
-                        className='text-xs text-foreground aria-disabled:text-muted-foreground aria-disabled:cursor-not-allowed cursor-pointer'
+                        disabled={isFirstPage}
+                        className='text-xs text-foreground aria-disabled:text-muted-foreground cursor-pointer'
                         onClick={() => createPageURL(currentPage - 1)}
                     />
                 </PaginationItem>
@@ -39,8 +56,8 @@ export default function CustomPagination({ totalPages }: { totalPages: number })
                 {/* Next Button */}
                 <PaginationItem>
                     <PaginationNext
-                        aria-disabled={currentPage === totalPages}
-                        className='text-xs text-foreground aria-disabled:text-muted-foreground aria-disabled:cursor-not-allowed cursor-pointer'
+                        disabled={isLastPage}
+                        className='text-xs text-foreground aria-disabled:text-muted-foreground cursor-pointer'
                         onClick={() => createPageURL(currentPage + 1)}
                     />
                 </PaginationItem>

src/components/ui/pagination.tsx

@@ -36,24 +36,37 @@ PaginationItem.displayName = "PaginationItem"
 
 type PaginationLinkProps = {
   isActive?: boolean
+  disabled?: boolean
 } & Pick<ButtonProps, "size"> &
   React.ComponentProps<"a">
 
 const PaginationLink = ({
   className,
   isActive,
+  disabled,
   size = "icon",
+  onClick,
   ...props
 }: PaginationLinkProps) => (
   <a
     aria-current={isActive ? "page" : undefined}
+    aria-disabled={disabled}
+    tabIndex={disabled ? -1 : undefined}
     className={cn(
       buttonVariants({
         variant: isActive ? "ghost" : "link",
         size,
       }),
+      "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
       className
     )}
+    onClick={(event) => {
+      if (disabled) {
+        event.preventDefault()
+        return
+      }
+      onClick?.(event)
+    }}
     {...props}
   />
 )