Bliksemsnel zoeken toevoegen aan je React/Next.js-site

Een zoekfunctie op je website kan de gebruikservaring flink verbeteren. Een goed ontworpen zoekbalk is krachtig gereedschap om betrokkenheid en conversie te verhogen. In dit artikel richten we ons op het toevoegen van een snelle zoekfunctie die eenvoudig te implementeren is, met behulp van de Custom Search API van Google.

Er zijn verschillende manieren om zoeken aan je website toe te voegen: een externe zoekmachine gebruiken, een zoekbalk rechtstreeks in je site bouwen, of een zoek-API inzetten. Elke optie heeft voor- en nadelen, maar een zoek-API als die van Google biedt een aantal voordelen boven de andere methoden.

Een van de belangrijkste voordelen van de Custom Search API van Google is dat je er een goed gedocumenteerde en eenvoudig te implementeren zoekfunctie mee op je website krijgt. De API is makkelijk in je Next.js-code te verwerken en laat je volledige controle over het ontwerp en de uitstraling van je zoekbalk en resultatenpagina's.

Een tweede voordeel is de schaalbaarheid, waardoor de API geschikt is voor websites van elke omvang en soort. Of je nu een kleine persoonlijke blog draait of een grote webwinkel: je koppelt de API eenvoudig aan je site voor een zoekervaring op maat.

Zo profiteer je met de Custom Search API van Google van hun krachtige zoekalgoritmes, aanpasbare resultatenpagina's en schaalbare platform, en lever je je bezoekers de best mogelijke zoekervaring zonder eindeloos veel tijd en moeite in een eigen zoekoplossing te steken.

In de volgende delen van dit artikel lopen we de stappen langs om de Custom Search API van Google in je website te integreren.

Om de JSON-API van Google Search te gebruiken hebben we, zoals de documentatie aangeeft, twee dingen nodig: het Programmable Search Engine-ID (het ID van de engine die de zoekopdracht uitvoert) en een API-sleutel om onze applicatie te identificeren.

Om een Programmable Search Engine in te schakelen log je in op het configuratiescherm en klik je op de knop 'Add'.

Het instellen is eenvoudig: we hoeven onze zoekmachine alleen een naam te geven en het bereik van de zoekopdracht te bepalen. Ons doel is alleen binnen onze eigen website zoeken, dus kiezen we 'Search specific sites or pages' en voegen we alle pagina's van ons domein toe in het blok 'What to search?'.

Dat is alles — zo eenvoudig is het. Nu kunnen we op 'Create' drukken.

Na het aanmaken van een engine krijg je een standaard HTML-zoekelement voorgesteld dat je op je site kunt gebruiken. Maar ons doel is een eigen front-end bouwen op de Google Search Engine API. We hebben dus alleen het Programmable Search Engine-ID nodig, dat je terugvindt in het overzicht van je zoekmachine.

De volgende stap is een API-sleutel aanmaken. Ga daarvoor naar de Google Cloud-console, kies het project waarvoor je de zoekfunctie wilt maken, en ga dan naar API & Services => Credentials => Create Credentials => API key.

De sleutel is aangemaakt; laten we hem bewerken. Geef hem een nieuwe naam en voeg API-beperkingen toe die het volgende toestaan:

• Cloud Translation API
• Custom Search API

Omdat de Custom Search API de taal niet automatisch herkent en standaard in het Engels zoekt, hebben we ook de Cloud Translation API nodig: die herkent de taal van de zoekopdracht, vertaalt hem, en doet daarnaast een zoekopdracht met de vertaalde tekst.

Staan deze opties niet in de lijst met API-beperkingen, dan moet je de betreffende API's eerst inschakelen. Dat doe je via API & Services => Enabled APIs & Services => Enable APIs & Services.

Klaar! Nu hebben we alle gegevens om het endpoint van de Google Search Engine API op onze website te gebruiken:

Voor het vertalen van zoekopdrachten gebruiken we de endpoints translate en detect van de Cloud Translation API.

Er zijn drie basisonderdelen nodig om zoeken te implementeren:

• het zoekbalkelement, dat op elke pagina van de website beschikbaar is;
• de zoekresultatenpagina, die de resultaten toont;
• de handleSearch()-functie, die een API aanroept en de resultaten teruggeeft.

De eerste twee laten we hier verder liggen: je bent volledig vrij om een eigen zoekbalk en resultatenpagina te ontwerpen en te bouwen, afhankelijk van wat je wilt bereiken.

Een van de grote voordelen van de Google Search Engine API is juist dat je eigen logica in je zoekfunctie kunt bouwen.

De tekening hieronder laat bijvoorbeeld de logica zien van de handleSearch()-functie die wij ontwikkeld hebben.

Kortom: door de Custom Search API van Google in je website te integreren geef je bezoekers een krachtige en efficiënte zoekfunctie. De API biedt een aantal duidelijke voordelen: hij is eenvoudig te implementeren, je profiteert van de krachtige zoekmachine van Google, de resultaten zijn snel, en je kunt zowel de front-end als je eigen zoeklogica helemaal naar eigen hand zetten.

Er zijn ook beperkingen — hij is gebaseerd op de gewone Google-zoekmachine en je kunt de werking daarvan niet verder verbeteren — maar daar staan genoeg voordelen tegenover. Zoek je een snelle, betrouwbare en aanpasbare zoekoplossing voor je website, dan verdient de Custom Search API van Google absoluut de voorkeur.