Next.js Discord

Discord Forum

pagination in nextjs

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
given the pagination component from shadcn, what's the way to pass the page number in the url as params so that I can retrieve it in my server component? my current approach isn't working

7 Replies

West African LionOP
this is my handlePageChange func
 function handlePageChange(pageNumber: number) {
    setPageNumber(pageNumber);
    updateSearchParams("page", pageNumber.toString());
  }

the updateSearchParam
export function useUpdateSearchParams() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const updateSearchParams = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams.toString());
      console.log(params);
      // Toggle the value (remove if exists, add if not)
      if (params.getAll(name).includes(value)) {
        const updatedValues = params.getAll(name).filter((v) => v !== value);
        params.delete(name);
        updatedValues.forEach((v) => params.append(name, v));
      } else {
        params.append(name, value);
      }

      router.push(`${pathname}?${params.toString()}`);
    },
    [pathname, router],
  );

  return { updateSearchParams, searchParams };
}
LuisLl
Do you want to fetch the data server side when changing the search params from the client?

Pages get {searchParams} as a prop
Changing the searchParams will
result in your page to be re-generated on the server with the latest data.
West African LionOP
yes, I've tried this with filtering, but with pagination, I don't understand how to pass the page number in the url from the href
West African LionOP
when doing this, the url params reset and only the page number is shown
LuisLl
Is there a specific reason you want to keep this on the server instead of the client?
West African LionOP
to avoid retrieving a large number of rows to the client in case there's a big amount of data