--- title: Such an interface mit Algolia InstantSearch und Next.js erstellen - elpassion.com description: Erfahren Sie, wie Sie schnell eine Suchoberfläche mit Algolia InstantSearch erstellen. image: https://www.elpassion.com/hubfs/algolia-instantsearch-nextjs.jpg --- [Back to blog ](https://www.elpassion.com/blog?hsLang=de) 7 März 2025 (updated: 7 März 2025) # Such eine Suchoberfläche mit Algolia InstantSearch und Next.js erstellen ![](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/de/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 Erfahren Sie, wie Sie schnell eine Suchoberfläche mit Algolia InstantSearch erstellen können.  Im vorherigen Artikel: [Geografische Filterung mit Algolia Geo Search, MapBox und Next.js](https://www.elpassion.com/blog/geographical-filtering-with-algolia-geo-search-mapbox-and-nextjs?hsLang=de), haben wir besprochen, wie wir unsere Ergebnisse basierend auf dem aktuellen geografischen Standort mithilfe der Algolia API filtern können. Wir haben auch darüber gesprochen, was Algolia ist und wie es funktioniert. Im heutigen Artikel werden wir dieses Wissen nutzen, uns jedoch auf eine andere Funktionalität zu konzentrieren, die vom Algolia-Team bereitgestellt wird, nämlich InstantSearch. ## Was ist Algolia InstantSearch? **InstantSearch ist eine UI-Bibliothek, die es ermöglicht, schnell Suchoberflächen zu erstellen**. Sie bietet ein fertiges Set von sogenannten Widgets, die vordefinierte, einsatzbereite Codeblöcke sind, die sofort in unser Projekt integriert und genutzt werden können. Die Widgets sind auch vollständig [anpassbar](https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react-hooks/). Darüber hinaus haben wir die Möglichkeit, unsere eigenen Widgets zu erstellen. Weitere Informationen zu diesem Thema finden Sie [hier](https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react-hooks/#next-steps). **Im React-Umfeld sind die genannten Widgets nichts anderes als Komponenten.** Darüber hinaus bietet Algolia spezielle [Hooks](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react-hooks/), die es noch einfacher machen, benutzerdefinierte Widgets von Grund auf zu erstellen oder zusammenzustellen. ## So verwenden Sie InstantSearch in Next.js In Bezug auf das Projekt werden wir das Next.js-Framework verwenden. Wir werden die Standard-Projektkonfiguration in Next, das Hochladen von Daten zu Algolia oder die grundlegende Integration mit Mapbox nicht besprechen. Ich gehe davon aus, dass Sie mir aus den vorherigen Artikeln folgen. Wenn nicht, empfehle ich Ihnen dringend, [wie man eine benutzerdefinierte Karte mit Mapbox Studio erstellt](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=de) und [wie man Daten auf der Karte mit der Algolia API filtert.](https://www.elpassion.com/blog/geographical-filtering-with-algolia-geo-search-mapbox-and-nextjs?hsLang=de) zu lesen. Um zu beginnen, müssen wir zuerst ein Konto im Algolia-Panel erstellen und Daten hochladen. Wir werden denselben Datensatz [verwenden](https://github.com/algolia/datasets/tree/master/airports), wie im vorherigen Artikel. Eine detaillierte Anleitung finden Sie hier: [Geografische Filterung mit Algolia Geo Search, MapBox und Next.js](https://www.elpassion.com/blog/geographical-filtering-with-algolia-geo-search-mapbox-and-nextjs#listItem-2). Lassen Sie uns mit der Installation der erforderlichen Bibliotheken beginnen. Neben den Bibliotheken aus dem vorherigen Artikel benötigen wir unter anderem die [react-instantsearch-hooks-web](https://www.npmjs.com/package/react-instantsearch-hooks-web) Bibliothek. Dies ist eine Bibliothek, die speziell für die React-Umgebung vorbereitet wurde und eine Reihe von vordefinierten Widgets und Hooks bereitstellt. Darüber hinaus werden wir auch [Tailwind CSS](https://tailwindcss.com/) verwenden. Es handelt sich um eine Bibliothek, die eine Reihe von CSS-Klassen enthält, die ein **sehr schnelles** Styling ohne die Notwendigkeit, Stylesheets zu erstellen, ermöglichen. Auf der Tailwind [Website](https://tailwindcss.com/docs/guides/nextjs) finden Sie eine detaillierte Anleitung zur Installation von Tailwind in einem Next.js-Projekt. **Vergessen Sie nicht, die Direktiven von Tailwind in die global.css-Datei hinzuzufügen!** Okay, lassen Sie uns mit dem Codieren beginnen! Wenn Sie mir aus dem letzten Artikel folgen, sollten Sie wissen, dass unsere Daten in Algolia so aussehen: ![Algolia-Datensatz](https://www.elpassion.com/hs-fs/hubfs/Algolia-dataset.png?width=590&height=268&name=Algolia-dataset.png)Quelle: Algolia Wir haben mehrere Felder zur Verfügung, um Daten zu filtern. Neben dem bereits im vorherigen Artikel verwendeten *_geolock*-Feld möchten wir auch Felder wie *name*, *country* und *links_count* verwenden, die wir der Einfachheit halber als die Popularität eines bestimmten Flughafens annehmen werden. Zuerst erstellen wir ein Airport-Interface, das den Typ unserer Daten widerspiegelt, die wir in Algolia halten. Wir benötigen es im nächsten Teil des Beitrags. Erstellen wir also einen Ordner "components" im Hauptverzeichnis unseres Projekts und darin eine Datei *types.ts*. Das erstellte Interface sollte so aussehen: **Um die integrierten Widgets zu verwenden, müssen sie in eine Wurzelkomponente namens InstantSearch eingebettet werden, die für die Kommunikation mit Algolia verantwortlich ist.** Erstellen wir also eine *AirportsSearch*-Komponente, die wiederum die *InstantSearch*-Komponente rendert. Sie nimmt Argumente wie *client* und *indexName* entgegen, die erforderlich sind, um eine Verbindung zu Algolia herzustellen. Darüber hinaus übergeben wir die children-Prop, die benötigt wird, um die Karte und die Listenansicht zu rendern. Wir werden auch ein *Configure*-Widget verwenden, das aus der *react-instantsearch-hooks-web*-Bibliothek importiert wird. Es ermöglicht das Übergeben von Suchparametern an Algolia. In unserem Fall ist der einzige Parameter, den wir übergeben werden, *hitsPerPage*, der die maximale Anzahl von Ergebnissen angibt, die von Algolia zurückgegeben werden. Wir müssen uns nicht auf diesen Parameter beschränken. Die vollständige Liste der verfügbaren Parameter finden Sie [hier](https://www.algolia.com/doc/api-reference/search-api-parameters/). Die erstellte Komponente sollte so aussehen: Wie wir in der Komponente sehen können, gibt es noch drei Komponenten, die ich noch nicht behandelt habe, nämlich *CountryFilter*, *PopularityFilter* und *CurrentFilters*. Lassen Sie uns das jetzt tun. Die *CountryFilter*-Komponente ist nichts anderes als ein Wrapper für das [*RefinementList*](https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/)-Widget, das von Algolia bereitgestellt wird. Laut der Dokumentation ist es eines der beliebtesten und am häufigsten verwendeten Widgets. **Es ermöglicht das Filtern von Daten mithilfe einer Mehrfachauswahl-Liste für ein bestimmtes Attribut**. In unserem Fall möchten wir, dass der Benutzer Flughäfen basierend auf dem Land, in dem sie sich befinden, filtern kann. Ich empfehle dringend, die Dokumentation und die verfügbaren Props, die das Widget annimmt, zu betrachten. Die *PopularityFilter*-Komponente ist ebenfalls ein Wrapper, jedoch für das [*RangeInput*](https://www.algolia.com/doc/api-reference/widgets/range-input/react-hooks/)-Widget. Es handelt sich um ein einfaches Widget, das es uns ermöglicht, einen Bereich zwischen zwei Zahlen auszuwählen. Wie im Fall von *RefinementList* müssen wir das entsprechende Feld festlegen, auf dem es arbeiten soll. **Wir müssen auch daran denken, dass dieses Feld numerisch sein muss.** **Wir müssen daran denken, dass für die oben genannten Widgets jedes der verwendeten Attribute zu den attributesForFaceting im Haupt-Algolia-Panel hinzugefügt werden muss**. Gehen Sie dazu zu *Konfiguration -> Facetten* und fügen Sie die Attribute als *Attribute für Facettierung* hinzu. In unserem Fall sieht es so aus: ![image4-2](https://www.elpassion.com/hs-fs/hubfs/image4-2.png?width=1094&height=305&name=image4-2.png)Quelle: Algolia Die letzte Komponente ist *CurrentFilters*. Ähnlich wie die vorherigen Komponenten ist sie ein Wrapper für das Algolia-Widget. In diesem Fall ist es das [*CurrentRefinements*](https://www.algolia.com/doc/api-reference/widgets/current-refinements/react-hooks/). Es ist ein sehr nützliches Widget, das die aktuellen Filter anzeigt. Fügen wir die oben genannten Komponenten hinzu und rendern die *AirportsSearch* in der *pages/index.tsx*-Datei. Übergeben Sie als Props den *SearchClient* und *indexName*, die zuvor erstellt wurden und dem Namen unseres Index im Algolia-Panel entsprechen. Als Kinder rendern wir die Karten- und Listenkomponenten, die wir bald durchgehen werden. Die gesamte Datei sieht so aus: Okay, lassen Sie uns zur Karte übergehen. Die Komponente selbst unterscheidet sich nicht viel von der, die wir im vorherigen Artikel erstellt haben. Der einzige Unterschied besteht darin, wie wir die Daten erhalten. Im vorherigen Fall verwendeten wir die Algolia-API, um neue Flughäfen zu erhalten und sie auf der Karte nach jeder Änderung der geografischen Koordinaten zu rendern. Wir verwendeten eine selbst erstellte *AlgoliaApi*-Klasse und die [react-query](https://react-query-v3.tanstack.com/)-Bibliothek. In diesem Ansatz benötigen wir diese Dinge nicht mehr. Wir werden weiterhin auf Änderungen der Koordinaten reagieren, aber der Aspekt der Datenabfrage wird auf der Seite von *InstantSearch* liegen. Alles, was wir tun müssen, ist, unsere Filter nach jeder Änderung der Koordinaten zu überschreiben, und wir werden den [*useInstantSearch*](https://www.algolia.com/doc/api-reference/widgets/use-instantsearch/react-hooks/)-Hook verwenden, um dies zu tun. Das Ganze sieht so aus: Um unsere Widgets schöner aussehen zu lassen, installieren wir auch das *instantsearch.css*-Paket mit dem Befehl **npm install instantsearch.css** und importieren die folgenden Stile in die *_app.tsx*-Datei - **import "instantsearch.css/themes/satellite.css".** Lassen Sie uns unser Projekt ausführen und überprüfen, wie die Filter funktionieren. ![InstantSearch.css-Filter](https://www.elpassion.com/hs-fs/hubfs/instantsearchcss-filters.gif?width=700&height=343&name=instantsearchcss-filters.gif)Quelle: Algolia Wir haben es geschafft! Wie wir sehen können, werden unsere Flughäfen basierend auf Land, Koordinaten und Popularität gefiltert. Wie wir uns wahrscheinlich erinnern, haben wir noch eine Komponente zu erstellen. Angenommen, wir möchten, dass der Benutzer die Flughäfen auch in Listenform anzeigen und zusätzlich nach Namen suchen kann, neben der Karte. Fügen wir also eine *AirportList*-Komponente hinzu und rendern sie in der *index.tsx*-Datei direkt unter der *Karten*-Komponente. Die Komponente selbst wird aus einigen Dingen bestehen. Zuerst wird es einen Button geben, der, wenn er gedrückt wird, unsere Liste anzeigt oder versteckt. Das zweite wird ein [*SearchBox*](https://www.algolia.com/doc/api-reference/widgets/search-box/react-hooks/)-Widget sein, das es den Benutzern ermöglicht, nach Flughäfen zu suchen, indem sie sie beispielsweise nach Namen filtern. Das dritte wird ein [*Hits*](https://www.algolia.com/doc/api-reference/widgets/hits/react-hooks/)-Widget sein, das die Liste der erhaltenen Ergebnisse anzeigt. Es kann die *hitComponent*-Prop als eines seiner Parameter annehmen, an die wir die Komponente übergeben können, die für jeden gerenderten Datensatz angezeigt werden soll. Das letzte wird das [*Pagination*](https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/pagination/react/)-Widget sein. Die gesamte Datei sieht so aus: Und so funktioniert unsere Liste: ![image2](https://www.elpassion.com/hs-fs/hubfs/image2.gif?width=700&height=466&name=image2.gif)Quelle: Algolia ## Abschließende Gedanken Algolia InstantSearch ist eine Bibliothek, die die schnelle Erstellung eines gesamten Systems für interaktive Suche mit minimalem Aufwand ermöglicht. Wie wir gesehen haben, ist die Implementierung sehr einfach und InstantSearch ist sehr gut für Geschwindigkeit optimiert.** Algolia unterstützt auch andere Frameworks wie Vue oder Angular. **Ich empfehle dringend, einen Blick auf die verfügbaren Optionen in der Algolia-Dokumentation zu werfen und diese erneut auszuprobieren. ### Siehe auch - [Geografische Filterung mit Algolia Geo Search, MapBox und Next.js](https://www.elpassion.com/blog/geographical-filtering-with-algolia-geo-search-mapbox-and-nextjs?hsLang=de) — Erfahren Sie, wie Sie Daten anzeigen und Geoserach auf der MapBox-Karte mit Algolia implementieren. - [Benutzerdefinierte Karten in Webanwendungen mit Mapbox und Mapbox Studio](https://www.elpassion.com/blog/custom-maps-in-web-apps-using-mapbox-and-mapbox-studio?hsLang=de) — Eine Schritt-für-Schritt-Anleitung zur Erstellung benutzerdefinierter Karten mit Mapbox und Mapbox Studio.  [Share on Twitter ](http://twitter.com/share?url=https://www.elpassion.com/de/blog/build-search-interface-with-algolia-instantsearch-and-nextjs) [Share on LinkedIn ](https://www.linkedin.com/shareArticle?mini=true&url=https://www.elpassion.com/de/blog/build-search-interface-with-algolia-instantsearch-and-nextjs) [Share on Facebook ](http://www.facebook.com/sharer.php?u=https://www.elpassion.com/de/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 ## Vielleicht gefällt Ihnen auch [![](https://www.elpassion.com/hubfs/natural-language-processing-features.png) ![](https://www.elpassion.com/hubfs/natural-language-processing-features.png) ](https://www.elpassion.com/de/blog/natural-language-processing?hsLang=de) - AI ### [Entfesseln Sie die Kraft der Worte: Wie NLP-Funktionen die Art und Weise verändern, wie wir Sprache verstehen](https://www.elpassion.com/de/blog/natural-language-processing?hsLang=de) 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/de/blog/rewrite-or-refactor-a-balanced-guide-to-legacy-systems?hsLang=de) - [ Development ](https://www.elpassion.com/de/blog/tag/development) - [ Business ](https://www.elpassion.com/de/blog/tag/business) ### [Umstrukturieren oder Überarbeiten? Ein ausgewogener Leitfaden zu Altsystemen](https://www.elpassion.com/de/blog/rewrite-or-refactor-a-balanced-guide-to-legacy-systems?hsLang=de) 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/de/blog/switch-from-wordpress-to-webflow?hsLang=de) - [ Business ](https://www.elpassion.com/de/blog/tag/business) ### [Warum das WordPress-Drama den Wechsel zu Webflow zu einem klugen Schritt macht](https://www.elpassion.com/de/blog/switch-from-wordpress-to-webflow?hsLang=de) 11 März 2025 • Maria Pradiuszyk Vielleicht ist das Anfang einer wunderbaren Freundschaft? ## Wir sind für neue Projekte verfügbar. [![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/de/blog/build-search-interface-with-algolia-instantsearch-and-nextjs", "@type" : "WebPage", "description" : "Erfahren Sie, wie Sie schnell eine Suchoberfläche mit Algolia InstantSearch erstellen." }, "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/de/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" : "Such an interface mit Algolia InstantSearch und Next.js erstellen - 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/de/blog/build-search-interface-with-algolia-instantsearch-and-nextjs" } ```