Tilføjelse af Paginering til en Next.js-App

For at give brugerne mulighed for at navigere mellem forskellige sider og se alle fakturaer, implementeres paginering ved hjælp af URL-parametre, på samme måde som søgefunktionen.

Tilbage til projektet

Trin 1

1. Hvis du navigerer til Pagination-komponenten, vil du se, at det er en klientkomponent. For at undgå at afsløre databasehemmeligheder, bør du undlade at hente data på klientsiden. Hent i stedet dataene på serversiden og videregiv dem som en prop til komponenten;
2. I app/dashboard/invoices/page.tsx, importér en ny funktion kaldet fetchInvoicesPages og videregiv søgeforespørgslen fra searchParams som et argument:
   • fetchInvoicesPages beregner det samlede antal sider baseret på søgeforespørgslen. For eksempel, hvis der er 12 matchende fakturaer med visning af 6 pr. side, vil det samlede antal sider være 2.
3. Videregiv totalPages-proppen til <Pagination/>-komponenten.

Trin 2

1. Naviger til app/ui/invoices/pagination.tsx;
2. Importér usePathname- og useSearchParams-hooks;
3. Brug disse hooks til at hente den aktuelle side og angive den nye side;
4. Fjern kommenteringen af koden i denne komponent.

Bemærk

Din applikation kan midlertidigt gå i stykker, da <Pagination/>-logikken endnu ikke er implementeret. Vi arbejder videre med det senere.

Trin 3

1. Inde i <Pagination>-komponenten, opret en ny funktion kaldet createPageURL;
2. Ligesom med søgefunktionen, brug URLSearchParams til at angive det nye sidenummer;
3. Brug pathName til at konstruere URL-strengen;
4. Fjern kommenteringen af variablen allPages.

Trin 4

Sidste trin – når brugeren indtaster en ny søgeforespørgsel, er det vigtigt at nulstille sidenummeret til 1. For at gøre dette skal du opdatere handleSearch-funktionen i app/ui/search.tsx.

I praksis