Herzlichen Glückwunsch! Wir haben alle grundlegenden Next.js-Konzepte behandelt. Sie sind nun in der Lage, verschiedene Arten von Anwendungen mit Next.js zu erstellen.

Im weiteren Verlauf beschäftigen wir uns mit fortgeschrittenen Konzepten, die für manche Anwendungen oder Projekte optional sind. Das Verständnis dieser Konzepte kann jedoch äußerst vorteilhaft sein.

Zurück zum Projekt

Richten wir unsere Aufmerksamkeit auf die Rechnungsseite und fahren mit deren Entwicklung fort.

Bitte kopieren und fügen Sie den folgenden Code in app/dashboard/invoices/page.tsx ein. Nehmen Sie sich Zeit, um den Zweck dieses Codes zu überprüfen und zu verstehen.

Die Anwendung verfügt über drei Hauptfunktionen:

• Search ermöglicht das Auffinden bestimmter Rechnungen;
• Pagination erlaubt das Navigieren zwischen den Rechnungsseiten;
• Table zeigt alle verfügbaren Rechnungen an.

Wir verwenden URL-Suchparameter zur Verwaltung des Suchstatus, was möglicherweise neu ist, wenn bisher clientseitiger Status verwendet wurde.

Vorteile sind:

• Nutzer können den aktuellen Anwendungszustand, einschließlich Suchanfragen und Filter, als Teil der URL speichern oder teilen;
• URL-Parameter erleichtern das serverseitige Rendering und vereinfachen die Initialisierung des Zustands auf dem Server;
• Mit Suchdetails in der URL wird das Nachverfolgen des Nutzerverhaltens einfacher und erfordert weniger clientseitige Logik.

Dieses Konzept wird im nächsten Kapitel weiterverfolgt.

In der Praxis