Gratulerar! Vi har nu gått igenom alla grundläggande Next.js-koncept. Du är nu rustad för att bygga olika typer av applikationer med Next.js.

Framöver kommer vi att fördjupa oss i avancerade koncept som är valfria för vissa applikationer eller projekt. Att ha kunskap om dessa koncept kan dock vara mycket fördelaktigt.

Tillbaka till projektet

Vi riktar nu fokus mot fakturasidan och fortsätter med dess utveckling.

Kopiera och klistra in följande kod i app/dashboard/invoices/page.tsx. Ta dig tid att granska och förstå syftet med denna kod.

Applikationen har tre huvudfunktioner:

• Search låter användare leta efter specifika fakturor;
• Pagination möjliggör navigering mellan fakturasidor;
• Table visar alla tillgängliga fakturor.

Vi kommer att använda URL-sökparametrar för att hantera sökstatus, vilket kan vara nytt om du är van vid att använda klientbaserad status.

Fördelar inkluderar:

• Användare kan bokmärka eller dela det aktuella applikationstillståndet, inklusive sökfrågor och filter, eftersom parametrarna är en del av URL:en;
• URL-parametrar underlättar server-side rendering och förenklar direkt initialtillståndet på servern;
• Med sökdetaljer i URL:en blir det enklare att spåra användarbeteende, vilket kräver mindre klientlogik.

Vi går vidare med detta koncept i nästa kapitel.

I praktiken