--- title: Bygg søkegrensesnitt med Algolia InstantSearch og Next.js - elpassion.com description: Se hvordan du raskt kan lage et søkegrensesnitt med Algolia InstantSearch. image: https://www.elpassion.com/hubfs/algolia-instantsearch-nextjs.jpg --- [Back to blog ](https://www.elpassion.com/blog?hsLang=no) 7 mars 2025 (updated: 7 mars 2025) # Bygg søkegrensesnitt med Algolia InstantSearch og Next.js ![](https://www.elpassion.com/hubfs/DawidKielbasa_author.png) ![](https://www.elpassion.com/hubfs/DawidKielbasa_author.png) by Dawid Kiełbasa - [ Development ](https://www.elpassion.com/no/blog/tag/development) Chapters ![](https://www.elpassion.com/hubfs/algolia-instantsearch-nextjs.jpg) ![](https://www.elpassion.com/hubfs/algolia-instantsearch-nextjs.jpg) Show contents Hide contents Se hvordan du raskt kan lage et søkegrensesnitt med Algolia InstantSearch.  I den forrige artikkelen: [Geografisk filtrering med Algolia Geo Search, MapBox og Next.js](https://www.elpassion.com/blog/geographical-filtering-with-algolia-geo-search-mapbox-and-nextjs?hsLang=no), diskuterte vi hvordan vi kan filtrere resultatene våre basert på den nåværende geografiske plasseringen ved hjelp av Algolia API. Vi snakket også om hva Algolia er og hvordan det fungerer. I dagens artikkel vil vi bruke den kunnskapen, men vi vil fokusere på en annen funksjon som tilbys av Algolia-teamet, nemlig InstantSearch. ## Hva er Algolia InstantSearch? **InstantSearch er et UI-bibliotek som gjør det mulig å raskt lage søkegrensesnitt**. Det tilbyr et ferdig sett med såkalte Widgets, som er forhåndsdefinerte, klare til bruk kodeblokker som umiddelbart kan plugges inn og brukes i prosjektet vårt. Widgetene er også fullt [tilpassbare](https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react-hooks/). I tillegg har vi muligheten til å lage våre egne widgets. Mer informasjon om dette emnet kan finnes [her](https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react-hooks/#next-steps). **I React-miljøet er de nevnte widgetene ikke annet enn komponenter.** I tillegg gir Algolia spesielle [hooks](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react-hooks/) som gjør det enda enklere å sette sammen eller lage tilpassede widgets fra bunnen av. ## Hvordan bruke InstantSearch i Next.js Når det gjelder prosjektet, vil vi bruke Next.js-rammeverket. Vi vil ikke diskutere standard prosjektoppsett i Next, opplasting av data til Algolia, eller grunnleggende integrasjon med Mapbox. Jeg antar at du følger meg fra de forrige artiklene. Hvis ikke, oppfordrer jeg deg sterkt til å lese [hvordan lage et tilpasset kart ved hjelp av Mapbox Studio](https://www.elpassion.com/blog/custom-maps-in-web-apps-using-mapbox-and-mapbox-studio?utm_source=linkedin&utm_medium=nop&utm_campaign=blog&utm_term=article&utm_content=li_nop_blg_art_cmaps&hsLang=no) og [hvordan filtrere data på kartet ved hjelp av Algolia API.](https://www.elpassion.com/blog/geographical-filtering-with-algolia-geo-search-mapbox-and-nextjs?hsLang=no) For å begynne, må vi først opprette en konto i Algolia-panelet og laste opp data. Vi vil bruke det samme settet med [data](https://github.com/algolia/datasets/tree/master/airports) som i den forrige artikkelen. En detaljert instruksjon kan finnes her: [Geografisk filtrering med Algolia Geo Search, MapBox og Next.js](https://www.elpassion.com/blog/geographical-filtering-with-algolia-geo-search-mapbox-and-nextjs#listItem-2). La oss begynne med å installere de nødvendige bibliotekene. I tillegg til bibliotekene fra den forrige artikkelen, vil vi trenge, blant annet, [react-instantsearch-hooks-web](https://www.npmjs.com/package/react-instantsearch-hooks-web) biblioteket. Dette er et bibliotek som er forberedt spesielt for React-miljøet og gir et sett med forhåndsdefinerte widgets og hooks. I tillegg vil vi også bruke [Tailwind CSS](https://tailwindcss.com/). Det er et bibliotek som inneholder et sett med CSS-klasser som tillater **svært rask** styling uten behov for å lage stilark. På Tailwind [nettstedet](https://tailwindcss.com/docs/guides/nextjs) finnes det en detaljert instruksjon om hvordan du installerer Tailwind i et Next.js-prosjekt. **Husk å legge til Tailwinds direktiver i global.css-filen!** Ok, la oss begynne å kode! Hvis du følger meg fra den forrige artikkelen, bør du vite at dataene våre i Algolia ser slik ut: ![Algolia Data Set](https://www.elpassion.com/hs-fs/hubfs/Algolia-dataset.png?width=590&height=268&name=Algolia-dataset.png)Kilde: Algolia Vi har flere felt tilgjengelige for filtrering av data. I tillegg til *_geolock*-feltet som allerede ble brukt i den forrige artikkelen, vil vi også bruke felt som *name*, *country*, og *links_count*, som for eksemplets skyld, vil vi anta representerer populariteten til en gitt flyplass. Først, la oss opprette et Airport-grensesnitt som reflekterer typen av dataene vi har i Algolia. Vi vil trenge det i den neste delen av innlegget. Så la oss opprette en komponentmappe i hovedkatalogen til prosjektet vårt, og i den, en *types.ts*-fil. Det opprettede grensesnittet skal se slik ut: **For å bruke de innebygde widgetene, må de pakkes inn i en rotkomponent kalt InstantSearch som er ansvarlig for kommunikasjonen med Algolia.** Så la oss opprette en *AirportsSearch*-komponent som igjen vil gjengi *InstantSearch*-komponenten. Den vil ta argumenter som *client* og *indexName*, som er nødvendige for å etablere en forbindelse med Algolia. I tillegg vil vi sende children-propen som vil være nødvendig for å gjengi kartet og listevisningen. Vi vil også bruke en *Configure*-widget importert fra *react-instantsearch-hooks-web*-biblioteket. Den tillater å sende søkeparametere til Algolia. I vårt tilfelle er det eneste parameteret vi vil sende *hitsPerPage*, som spesifiserer det maksimale antallet resultater som returneres av Algolia. Vi trenger ikke å begrense oss til dette parameteret. Den fullstendige listen over tilgjengelige parametere kan finnes [her](https://www.algolia.com/doc/api-reference/search-api-parameters/). Den opprettede komponenten skal se slik ut: Som vi kan se i komponenten, er det fortsatt tre komponenter som jeg ikke har dekket ennå, nemlig *CountryFilter*, *PopularityFilter*, og *CurrentFilters*. La oss gjøre det nå. *CountryFilter*-komponenten er ikke annet enn en wrapper for [*RefinementList*](https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/)-widgeten som tilbys av Algolia. I følge dokumentasjonen er det en av de mest populære og ofte brukte widgetene. **Den tillater filtrering av data ved hjelp av en flervalgsliste for en gitt attributt**. I vårt tilfelle ønsker vi at brukeren skal kunne filtrere flyplasser basert på landet de ligger i. Jeg oppfordrer sterkt til å se på dokumentasjonen og de tilgjengelige propsene som widgeten tar. *PopularityFilter*-komponenten er også en wrapper, men for [*RangeInput*](https://www.algolia.com/doc/api-reference/widgets/range-input/react-hooks/)-widgeten. Det er en enkel widget som lar oss velge et intervall mellom to tall. Som i tilfellet med *RefinementList*, må vi sette det passende feltet som den skal operere på. **Vi må også huske at dette feltet må være numerisk.** **Vi må huske at for at de ovennevnte widgetene skal fungere, må hver av de brukte attributtene legges til i attributesForFaceting i hoved Algolia-panelet**. For å gjøre dette, gå til *Konfigurasjon -> Fakta* og legg til attributtene som *Attributter for faktorisering*. I vårt tilfelle ser det slik ut: ![image4-2](https://www.elpassion.com/hs-fs/hubfs/image4-2.png?width=1094&height=305&name=image4-2.png)Kilde: Algolia Den siste komponenten er *CurrentFilters*. I likhet med de forrige komponentene, er det en wrapper for Algolia-widgeten. I dette tilfellet er det [*CurrentRefinements*](https://www.algolia.com/doc/api-reference/widgets/current-refinements/react-hooks/). Det er en veldig nyttig widget som viser de nåværende filtrene. La oss legge til de ovennevnte komponentene og gjengi *AirportsSearch* i *pages/index.tsx*-filen. Som props, send *SearchClient* og *indexName* som ble opprettet tidligere, som tilsvarer navnet på indeksen vår i Algolia-panelet. Som children, gjengi kart- og listekomponentene som vi snart skal gå gjennom. Hele filen ser slik ut. Ok, la oss gå videre til kartet. Komponenten i seg selv skiller seg ikke mye fra den vi laget i den forrige artikkelen. Den eneste forskjellen er hvordan vi henter dataene. I forrige tilfelle brukte vi Algolia API for å hente nye flyplasser og gjengi dem på kartet etter hver endring i geografiske koordinater. Vi brukte en spesiallaget *AlgoliaApi*-klasse og [react-query](https://react-query-v3.tanstack.com/)-biblioteket. I denne tilnærmingen trenger vi ikke de tingene lenger. Vi vil fortsatt svare på endringer i koordinater, men aspektet av datainnhenting vil være på *InstantSearch*-siden. Alt vi må gjøre er å overstyre filtrene våre etter hver endring i koordinater, og vi vil bruke [*useInstantSearch*](https://www.algolia.com/doc/api-reference/widgets/use-instantsearch/react-hooks/)-hooken for å gjøre dette. Hele greia ser slik ut: For å få widgetene våre til å se penere ut, la oss også installere *instantsearch.css*-pakken ved å bruke kommandoen** npm install instantsearch.css** og importere følgende stiler i *_app.tsx*-filen - **import "instantsearch.css/themes/satellite.css".** La oss kjøre prosjektet vårt og sjekke hvordan filtrene fungerer. ![InstantSearch.css filters](https://www.elpassion.com/hs-fs/hubfs/instantsearchcss-filters.gif?width=700&height=343&name=instantsearchcss-filters.gif)Kilde: Algolia Vi klarte det! Som vi kan se, er flyplassene våre filtrert basert på land, koordinater og popularitet. Som vi sannsynligvis husker, har vi en komponent til å lage. La oss anta at vi ønsker at brukeren skal kunne se flyplassene i listeform i tillegg til å kunne søke etter navn, i tillegg til kartet. Så, la oss legge til en *AirportList*-komponent og gjengi den i *index.tsx*-filen rett under *kart*-komponenten. Komponenten i seg selv vil bestå av noen få ting. Den første vil være en knapp som, når den trykkes, vil vise eller skjule listen vår. Den andre tingen vil være en [*SearchBox*](https://www.algolia.com/doc/api-reference/widgets/search-box/react-hooks/)-widget som vil tillate brukerne å søke etter flyplasser ved å filtrere dem etter navn, for eksempel. Den tredje tingen vil være en [*Hits*](https://www.algolia.com/doc/api-reference/widgets/hits/react-hooks/)-widget som viser listen over resultater som er oppnådd. Den kan ta *hitComponent*-propen som en av parameterne, til hvilken vi kan sende komponenten som skal vises for hver gjengitte post. Den siste tingen vil være en [*Pagination*](https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/pagination/react/)-widget. Hele filen ser slik ut. Og slik fungerer listen vår: ![image2](https://www.elpassion.com/hs-fs/hubfs/image2.gif?width=700&height=466&name=image2.gif)Kilde: Algolia ## Avsluttende tanker Algolia InstantSearch er et bibliotek som muliggjør rask oppretting av et helt system for interaktiv søk med minimal innsats. Som vi har sett, er implementeringen veldig enkel, og InstantSearch er svært godt optimalisert for hastighet.** Algolia støtter også andre rammeverk som Vue eller Angular. **Jeg anbefaler sterkt å se på de tilgjengelige alternativene i Algolia-dokumentasjonen og eksperimentere med dem igjen. ### Se også - [Geografisk filtrering med Algolia Geo Search, MapBox og Next.js](https://www.elpassion.com/blog/geographical-filtering-with-algolia-geo-search-mapbox-and-nextjs?hsLang=no) — Se hvordan du viser data og implementerer Geoserach på MapBox-kart ved hjelp av Algolia. - [Egendefinerte kart i webapplikasjoner ved hjelp av Mapbox og Mapbox Studio](https://www.elpassion.com/blog/custom-maps-in-web-apps-using-mapbox-and-mapbox-studio?hsLang=no) — En trinn-for-trinn guide om hvordan du lager egendefinerte kart ved hjelp av Mapbox og Mapbox Studio.  [Share on Twitter ](http://twitter.com/share?url=https://www.elpassion.com/no/blog/build-search-interface-with-algolia-instantsearch-and-nextjs) [Share on LinkedIn ](https://www.linkedin.com/shareArticle?mini=true&url=https://www.elpassion.com/no/blog/build-search-interface-with-algolia-instantsearch-and-nextjs) [Share on Facebook ](http://www.facebook.com/sharer.php?u=https://www.elpassion.com/no/blog/build-search-interface-with-algolia-instantsearch-and-nextjs) ![](https://www.elpassion.com/hubfs/DawidKielbasa_author.png) ![](https://www.elpassion.com/hubfs/DawidKielbasa_author.png) Dawid Kiełbasa Frontend Developer ## Du kan også like dette [![](https://www.elpassion.com/hubfs/natural-language-processing-features.png) ![](https://www.elpassion.com/hubfs/natural-language-processing-features.png) ](https://www.elpassion.com/no/blog/natural-language-processing?hsLang=no) - AI ### [Lås opp kraften i ord: Hvordan NLP-funksjoner endrer måten vi forstår språk på](https://www.elpassion.com/no/blog/natural-language-processing?hsLang=no) 23 juni 2025 • Ula Kowalska [![](https://www.elpassion.com/hubfs/125d6de5-3db6-43db-ab6e-eab671ba037f.png) ![](https://www.elpassion.com/hubfs/125d6de5-3db6-43db-ab6e-eab671ba037f.png) ](https://www.elpassion.com/no/blog/rewrite-or-refactor-a-balanced-guide-to-legacy-systems?hsLang=no) - [ Development ](https://www.elpassion.com/no/blog/tag/development) - [ Business ](https://www.elpassion.com/no/blog/tag/business) ### [Skrive om eller refaktorere? En balansert guide til legacy-systemer](https://www.elpassion.com/no/blog/rewrite-or-refactor-a-balanced-guide-to-legacy-systems?hsLang=no) 14 april 2025 • Ula Kowalska [![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/migrating-wordpress-to-webflow.png) ![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/migrating-wordpress-to-webflow.png) ](https://www.elpassion.com/no/blog/switch-from-wordpress-to-webflow?hsLang=no) - [ Business ](https://www.elpassion.com/no/blog/tag/business) ### [Hvorfor WordPress-dramaet gjør overgangen til Webflow til et smart valg](https://www.elpassion.com/no/blog/switch-from-wordpress-to-webflow?hsLang=no) 11 mars 2025 • Maria Pradiuszyk Kanskje dette er starten på en vakker venskap? ## Vi er tilgjengelig for nye prosjekter. [![Contact us](https://no-cache.hubspot.com/cta/default/4937048/d8fa95f1-46dc-4ecf-b1a6-aa709c23404b.png)](https://cta-redirect.hubspot.com/cta/redirect/4937048/d8fa95f1-46dc-4ecf-b1a6-aa709c23404b) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "Poland", "addressLocality" : "Warsaw", "addressRegion" : "Mazowieckie", "postalCode" : "", "streetAddress" : "Grzybowska 62 " }, "email" : "projects@elpassion.com", "foundingDate" : "2011", "foundingLocation" : "Warsaw, Poland", "logo" : "https://www.elpassion.com/hubfs/elp_mnt_black.svg", "mainEntityOfPage" : { "@id" : "https://www.elpassion.com/no/blog/build-search-interface-with-algolia-instantsearch-and-nextjs", "@type" : "WebPage", "description" : "Se hvordan du raskt kan lage et søkegrensesnitt med Algolia InstantSearch." }, "member" : { "@type" : "Person", "jobTitle" : "CEO", "name" : "Anna Elwart", "nationality" : "Poland", "url" : "https://www.linkedin.com/in/annaelwart/" }, "name" : "El Passion", "numberOfEmployees" : "60", "sameAs" : [ "https://twitter.com/elpassion", "https://www.facebook.com/elpassion/", "https://www.linkedin.com/company/el-passion", "https://github.com/elpassion", "https://www.behance.net/elpassion", "https://dribbble.com/elpassion" ], "url" : "https://www.elpassion.com", "vatId" : "PL5213644497" } ``` ```json { "@context" : "http://schema.org", "@type" : "WebSite", "url" : "https://www.elpassion.com/" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : [ { "@type" : "Person", "name" : "Dawid Kiełbasa", "url" : "https://www.elpassion.com/no/blog/author/dawid-kielbasa" }, { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : "150", "url" : "https://26048673.fs1.hubspotusercontent-eu1.net/hubfs/26048673/EL-Passion-Logo-400x150.svg", "width" : "400" }, "name" : "EL Passion", "url" : "https://www.elpassion.com" } ], "dateModified" : "2025-03-07", "datePublished" : "2025-03-07", "headline" : "Bygg søkegrensesnitt med Algolia InstantSearch og Next.js - elpassion.com", "image" : "https://www.elpassion.com/hubfs/algolia-instantsearch-nextjs.jpg", "inLanguage" : "en", "mainEntityOfPage" : { "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : "150", "url" : "https://26048673.fs1.hubspotusercontent-eu1.net/hubfs/26048673/EL-Passion-Logo-400x150.svg", "width" : "400" }, "name" : "EL Passion", "url" : "https://www.elpassion.com" }, "url" : "https://www.elpassion.com/no/blog/build-search-interface-with-algolia-instantsearch-and-nextjs" } ```