Kursinhalt
Next.js 14
Next.js 14
Seitennummerierung
Um den Benutzern das Navigieren durch verschiedene Seiten und das Anzeigen aller Rechnungen zu ermöglichen, implementieren Sie die Paginierung mithilfe von URL-Parametern, ähnlich der Suchfunktionalität.
Zurück zum Projekt
Schritt 1
Wenn Sie zur
Pagination
-Komponente navigieren, sehen Sie, dass es sich um eine Client-Komponente handelt. Um zu vermeiden, dass Datenbankgeheimnisse offengelegt werden, sollten Sie keine Daten auf der Client-Seite abrufen. Stattdessen sollten Sie die Daten auf dem Server abrufen und als Prop an die Komponente übergeben;Importieren Sie in
app/dashboard/invoices/page.tsx
eine neue Funktion namensfetchInvoicesPages
und übergeben Sie die Suchanfrage aussearchParams
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, wäre die Gesamtanzahl der Seiten 2.
Übergeben Sie das
totalPages
-Prop an die<Pagination/>
-Komponente.
Schritt 2
Navigieren Sie zu
app/ui/invoices/pagination.tsx
;Importieren Sie die Hooks
usePathname
unduseSearchParams
;Verwenden Sie diese Hooks, um die aktuelle Seite abzurufen und die neue Seite festzulegen;
Kommentieren Sie den Code in dieser Komponente aus.
Hinweis
Ihre Anwendung kann vorübergehend nicht funktionieren, da die
<Pagination/>
-Logik noch nicht implementiert ist. Wir werden später daran arbeiten.
Schritt 3
Erstellen Sie innerhalb der
<Pagination>
-Komponente eine neue Funktion namenscreatePageURL
;Ähnlich wie bei der Suchfunktionalität verwenden Sie
URLSearchParams
, um die neue Seitennummer festzulegen;Verwenden Sie
pathName
, um den URL-String zu konstruieren;Kommentieren Sie die Variable
allPages
aus.
Schritt 4
Letzter Schritt - wenn der Benutzer eine neue Suchanfrage eingibt, ist es wichtig, die Seitennummer auf 1 zurückzusetzen. Um dies zu erreichen, aktualisieren Sie die handleSearch
-Funktion in der app/ui/search.tsx
.
In der Praxis
Danke für Ihr Feedback!