Hinzufügen von Paginierung zu einer Next.js-App

Um den Nutzern die Navigation durch verschiedene Seiten und die Anzeige aller Rechnungen zu ermöglichen, Paginierung mithilfe von URL-Parametern implementieren, ähnlich wie bei der Suchfunktion.

Zurück zum Projekt

Schritt 1

1. Wenn Sie zur Pagination-Komponente navigieren, sehen Sie, dass es sich um eine Client-Komponente handelt. Um das Offenlegen von Datenbankgeheimnissen zu vermeiden, sollten Sie keine Daten auf der Client-Seite abrufen. Stattdessen sollten die Daten auf dem Server abgerufen und als Prop an die Komponente übergeben werden;
2. Importieren Sie in app/dashboard/invoices/page.tsx eine neue Funktion namens fetchInvoicesPages und übergeben Sie die Suchanfrage aus searchParams als Argument:
   • fetchInvoicesPages berechnet die Gesamtanzahl der Seiten basierend auf der Suchanfrage. Wenn es beispielsweise 12 passende Rechnungen mit einer Anzeige von 6 pro Seite gibt, beträgt die Gesamtanzahl der Seiten 2.
3. Übergeben Sie die Prop totalPages an die Komponente <Pagination/>.

Schritt 2

1. Navigieren Sie zu app/ui/invoices/pagination.tsx;
2. Importieren Sie die Hooks usePathname und useSearchParams;
3. Verwenden Sie diese Hooks, um die aktuelle Seite abzurufen und die neue Seite zu setzen;
4. Kommentieren Sie den Code in dieser Komponente aus.

Hinweis

Ihre Anwendung kann vorübergehend nicht funktionieren, da die Logik für <Pagination/> noch nicht implementiert ist. Wir werden dies später bearbeiten.

Schritt 3

1. Erstellen Sie innerhalb der <Pagination>-Komponente eine neue Funktion namens createPageURL;
2. Verwenden Sie ähnlich wie bei der Suchfunktionalität URLSearchParams, um die neue Seitennummer zu setzen;
3. Nutzen Sie pathName, um den URL-String zu erstellen;
4. Kommentieren Sie die Variable allPages aus.

Schritt 4

Letzter Schritt – wenn der Benutzer eine neue Suchanfrage eingibt, muss die Seitenzahl auf 1 zurückgesetzt werden. Aktualisieren Sie dazu die Funktion handleSearch in app/ui/search.tsx.

In der Praxis