Tillykke! Vi har gennemgået alle de grundlæggende Next.js-koncepter. Du er nu rustet til at bygge forskellige typer apps med Next.js.

Fremadrettet vil vi dykke ned i avancerede koncepter, som er valgfrie for nogle apps eller projekter. At tilegne sig viden om disse koncepter kan dog være meget fordelagtigt.

Tilbage til projektet

Lad os rette fokus mod fakturasiden og fortsætte med dens udvikling.

Kopier og indsæt venligst følgende kode i app/dashboard/invoices/page.tsx. Brug lidt tid på at gennemgå og forstå formålet med denne kode.

Applikationen har tre centrale funktioner:

• Search giver brugerne mulighed for at finde specifikke fakturaer;
• Pagination gør det muligt at navigere mellem sider med fakturaer;
• Table viser alle tilgængelige fakturaer.

Vi vil anvende URL-søgeparametre til at håndtere søgetilstanden, hvilket kan være nyt, hvis du er vant til at bruge klient-side tilstand.

Fordelene omfatter:

• Brugere kan bogmærke eller dele den aktuelle applikationstilstand, inklusive søgeforespørgsler og filtre, da parametrene er en del af URL'en;
• URL-parametre understøtter server-side rendering og forenkler opsætningen af den indledende tilstand direkte på serveren;
• Med søgedetaljer i URL'en bliver det lettere at spore brugeradfærd, hvilket kræver mindre klient-side logik.

Vi fortsætter med denne tilgang i det næste kapitel.

I praksis