Gefeliciteerd! We hebben alle fundamentele Next.js-concepten behandeld. Je bent nu in staat om verschillende soorten applicaties te bouwen met Next.js.

Vanaf nu gaan we dieper in op geavanceerde concepten die optioneel zijn voor sommige apps of projecten. Het beheersen van deze concepten kan echter zeer waardevol zijn.

Terug naar het project

We richten onze aandacht op de facturenpagina en gaan verder met de ontwikkeling hiervan.

Kopieer en plak de volgende code in app/dashboard/invoices/page.tsx. Neem de tijd om de code te bekijken en het doel ervan te begrijpen.

De applicatie heeft drie kernfuncties:

• Search stelt gebruikers in staat om naar specifieke facturen te zoeken;
• Pagination maakt het mogelijk om tussen pagina's met facturen te navigeren;
• Table toont alle beschikbare facturen.

We gebruiken URL-zoekparameters om de zoekstatus te beheren, wat nieuw kan zijn als je gewend bent aan client-side statusbeheer.

Voordelen zijn onder andere:

• Gebruikers kunnen de huidige applicatiestatus, inclusief zoekopdrachten en filters, als bladwijzer opslaan of delen, omdat de parameters deel uitmaken van de URL;
• URL-parameters vergemakkelijken server-side rendering, waardoor het instellen van de initiële status op de server direct eenvoudiger wordt;
• Met zoekgegevens in de URL wordt het volgen van gebruikersgedrag eenvoudiger, met minder client-side logica.

We gaan in het volgende hoofdstuk verder met dit idee.

In de praktijk