Rechnungsseite

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

Im weiteren Verlauf werden wir uns mit fortgeschrittenen Konzepten befassen, die für einige Apps oder Projekte optional sind. Das Wissen über diese Konzepte kann jedoch sehr vorteilhaft sein.

Zurück zum Projekt

Lassen Sie uns den Fokus auf die Rechnungsseite verlagern und mit deren Entwicklung fortfahren.

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

Die Anwendung hat drei Hauptfunktionen:

• Search ermöglicht es Benutzern, nach bestimmten Rechnungen zu suchen;
• Pagination erlaubt es ihnen, zwischen Rechnungsseiten zu navigieren;
• Table zeigt alle verfügbaren Rechnungen an.

Wir werden URL-Suchparameter verwenden, um den Suchstatus zu verwalten, was neu sein könnte, wenn Sie es gewohnt sind, einen clientseitigen Status zu verwenden.

Vorteile umfassen:

• Benutzer können den aktuellen Anwendungsstatus, einschließlich Suchanfragen und Filter, als Teil der URL speichern oder teilen;
• URL-Parameter erleichtern das serverseitige Rendering und vereinfachen direkt die anfängliche Statuskonfiguration auf dem Server;
• Mit Suchdetails in der URL wird das Verfolgen des Benutzerverhaltens einfacher und erfordert weniger clientseitige Logik.

Lassen Sie uns diese Idee im nächsten Kapitel weiterverfolgen.

In der Praxis