Teori

Før implementering af søgefunktionalitet er det vigtigt at forstå disse klient-hooks.

• useSearchParams;
  • Giver adgang til aktuelle URL-parametre;
  • Eksempel: For URL'en /dashboard/invoices?page=1&query=pending returnerer den {page: '1', query: 'pending'}.
• usePathname;
  • Aflæser den aktuelle URL's sti;
  • Eksempel: For ruten domain/dashboard/invoices returnerer usePathname "/dashboard/invoices".
• useRouter.
  • Muliggør navigation mellem ruter i klientkomponenter og tilbyder flere metoder.

Oversigt over implementeringstrin:

1. Indfang brugerinput;
2. Opdater URL'en med søgeparametre;
3. Synkronisér URL'en med inputfeltet;
4. Opdater tabellen, så den afspejler søgeforespørgslen.

Tilbage til projektet

1. Indfang brugerinput

1. Åbn Search-komponenten (app/ui/search.tsx);
2. Bemærk brugen af 'use client', hvilket angiver tilgængeligheden af event-lyttere og hooks;
3. Udnyt funktionen handleSearch, som aktiveres ved hver ændring i inputfeltet.

Efter implementering skal du åbne udviklerkonsollen i din browser. Du bør se enhver tekst, der indtastes i inputfeltet, blive vist i browserens konsol.

2. Opdater URL'en med søgeparametre

1. Importér useSearchParams hooken fra 'next/navigation' og tildel den til en variabel;
2. Opret inden for handleSearch-funktionen en ny instans af URLSearchParams ved at bruge den tidligere definerede variabel (searchParams). Dette værktøj giver metoder til at håndtere URL-forespørgselsparametre;
3. Angiv parameterstrengen baseret på brugerens input. Hvis inputfeltet er tomt, skal det slettes;
4. Benyt useRouter og usePathname hooks fra 'next/navigation' og brug replace-metoden fra useRouter() inden for handleSearch.
   • ${pathname} repræsenterer den aktuelle sti, f.eks. "/dashboard/invoices";
   • Når brugeren skriver i søgefeltet, konverterer params.toString() inputtet til et URL-venligt format;
   • replace(${pathname}?${params.toString()}) opdaterer URL'en med brugerens søgedata (f.eks. /dashboard/invoices?query=qwerty).

URL'en opdateres uden sideopdatering takket være Next.js's klient-side navigation.

Efter implementering vil enhver tekst indtastet i inputfeltet blive afspejlet i URL'en.

3. Hold URL'en synkroniseret med inputfeltet

For at sikre at inputfeltet matcher URL'en og bliver udfyldt, når den deles, anvendes defaultValue ved at læse fra searchParams.

4. Opdater tabellen for at afspejle søgeforespørgslen

Til sidst opdateres Table-komponenten for at afspejle søgeforespørgslen. Sidekomponenter accepterer en prop kaldet searchParams. Overfør de aktuelle URL-parametre til <Table>-komponenten.

Husk at fjerne kommenteringen af Table-komponenten.

Fremragende! Du har nu tilføjet søgefunktionalitet til din app. Prøv det af – fungerer det? 😊

I næste kapitel ser vi nærmere på paginering, da kun 6 fakturaer i øjeblikket er synlige på siden.

I praksis