Teori

Før implementering av søkefunksjonalitet er det viktig å forstå disse klient-hookene.

• useSearchParams;
  • Gir tilgang til gjeldende URL-parametere;
  • Eksempel: For URL-en /dashboard/invoices?page=1&query=pending, gir den {page: '1', query: 'pending'}.
• usePathname;
  • Leser gjeldende URL-sti;
  • Eksempel: For ruten domain/dashboard/invoices, returnerer usePathname "/dashboard/invoices".
• useRouter.
  • Forenkler navigering mellom ruter i klientkomponenter og tilbyr flere metoder.

Oversikt over implementeringstrinn:

1. Fange opp brukerinput;
2. Oppdatere URL med søkeparametere;
3. Holde URL synkronisert med inndatafeltet;
4. Oppdatere tabellen for å gjenspeile søkespørringen.

Tilbake til prosjektet

1. Fange brukerinput

1. Åpne Search-komponenten (app/ui/search.tsx);
2. Observer bruken av 'use client', som indikerer at event-lyttere og hooks er tilgjengelige;
3. Bruk handleSearch-funksjonen, som utløses ved hver endring i inputfeltet.

Etter implementering, åpne utviklerkonsollen i nettleseren din. All tekst som skrives inn i inputfeltet skal vises i nettleserens konsoll.

2. Oppdater URL-en med søkeparametere

1. Importer useSearchParams-hooken fra 'next/navigation' og tildel den til en variabel;
2. Inne i handleSearch-funksjonen, opprett en ny instans av URLSearchParams ved å bruke den tidligere definerte variabelen (searchParams). Dette verktøyet gir metoder for å manipulere spørringsparametere i URL-en;
3. Angi parameterstrengen basert på brukerens inndata. Hvis inndatafeltet er tomt, slett det;
4. Bruk useRouter og usePathname-hookene fra 'next/navigation' og bruk replace-metoden fra useRouter() inne i handleSearch.
   • ${pathname} representerer gjeldende sti, for eksempel "/dashboard/invoices";
   • Når brukeren skriver i søkefeltet, konverterer params.toString() inndata til et URL-vennlig format;
   • replace(${pathname}?${params.toString()}) oppdaterer URL-en med brukerens søkedata (for eksempel /dashboard/invoices?query=qwerty).

URL-en oppdateres uten sideoppdatering, takket være Next.js sin klient-side navigasjon.

Etter implementering vil all tekst som skrives inn i feltet gjenspeiles i URL-en.

3. Hold URL-en synkronisert med inndatafeltet

For å sikre at inndatafeltet samsvarer med URL-en og fylles ut når det deles, bruk defaultValue ved å lese fra searchParams.

4. Oppdater tabellen for å gjenspeile søkespørringen

Til slutt oppdaterer vi Table-komponenten for å gjenspeile søkespørringen. Sidekomponenter aksepterer en prop kalt searchParams. Send de nåværende URL-parametrene til <Table>-komponenten.

Husk å fjerne kommentaren på Table-komponenten.

Supert! Du har nå lagt til søkefunksjonalitet i appen din. Prøv det ut – fungerer det? 😊

I neste kapittel ser vi nærmere på paginering, siden kun 6 fakturaer vises på siden nå.

I praksis