Gehen wir davon aus, dass Sie planen, eine On-Page-Suche auf Ihrer Website oder Ihrem Blog zu integrieren und Sie wissen nicht, welche Lösung einfach zu implementieren und dazu auch noch kostenlos ist. Haben Sie bereits von dem Headless CMS Contentful und der KI-Suche Algolia gehört?
Wir bereits in meinen vorherigen Artikeln beschrieben (Schritt-für-Schritt Anleitung für das ganze Projekt -> Next js Content Management, Quo Vadis ? ) gibt es großzügige Abomodelle von Contentful und Algolia.
Algolia — Build Plan (Kostenlos)
Bis zu 10k Suchanfragen pro Monat
1 Mio. Datensätze
KI Funktionen stehen zum Testen bereit
Contentful — Free Plan
5 Benutzer
2 Sprachen
1M API Anfragen / Monat
Community-support
Strukturierter Inhalt
Entwickler tools
1 Intro Space
Next.js 14 — Route
Native Api Funktionen von Next.js
Beginnen wir damit, ein neues Contentful-Konto zu registrieren (falls noch nicht geschehen). Hier sind zwei Beiträge mit einer Schritt-für-Schritt-Anleitung:
Contentful Kontoregistrierung
Nextjs 13.5.6 — Complete Example — Typescript / App Router / Contentful and a lot more
Weitere Informationen zu den Inhaltstypen und GraphQL
Next.js 14 — Complete Example — Typescript / Tailwindcss / Contentful — Part 2
Jetzt noch ein Algolia Konto registrieren
Sign Up for an Algolia account
Sie können den sog. Social Login verwenden oder Ihre Mailadresse. Nachdem Sie angemeldet sind, müssen Sie eine Anwendung erstellen (Algolia erstellt nach der ersten Anmeldung eine Standardanwendung). Klicken Sie zunächst auf (1), um die Einstellungsseite zu öffnen, und dann auf (2), um die Übersichtsseite der Anwendung zu öffnen.
Hier sieht man die Übersichtsseite der Anwendungen ohne einen Index (1).
Klicken wir auf (2), um die Übersichtsseite der Suche zu öffnen, und dann klicken wir auf den Button „Index erstellen“. Wir werden ihn „example_dev“ nennen.
Gehen wir jetzt zurück zur Übersichtsseite der Einstellungen (unteres linkes Symbol -> wie im ersten Algolia-Screenshot gezeigt), aber jetzt klicken wir im linken Abschnitt „Team und Zugriff“ auf „API-Schlüssel“. Wir gelangen auf die Übersichtsseite der API-Schlüssel, wo wir drei Werte benötigen (“Application ID”, “Search-Only API Key” and ”Admin API Key”). Der Search-Only-Schlüssel wird im nächsten Beitrag verwendet, während der Frontend-Implementierung von Algolia. Jetzt benötigen wir den Admin-API-Schlüssel, weil wir Daten in den zuvor erstellten Index „example_dev“ schreiben müssen.
Nachdem beide Accounts (Contentful und Algolia) registriert und konfiguriert wurden, erstellen wir mit Next.js 14 den Api Endpunkt für den Daten-Push Richtung Algolia.
Sie können auch direkt das unten angeführte GitHub-Repository klonen.
GitHub link -> GitHub - cloudapp-dev/nextjs14-SEO
welches bereits den kompletten Code der 6 vorhergehenden Artikel beinhaltet (Übersicht) + SEO Zusatzinfos
Wir fügen folgenden Variablen zur Datei .env.local hinzu
Mit diesen Befehl können Sie einen Api-Key generieren.
Einen Endpunkt in Next.js erstellen
Für den neuen Endpunkt erstellen wir einen neuen Ordner unter /src/app/api mit dem Namen “algoliasync” mit der unten angeführten route.ts Datei darin.
Am Dateianfang importieren wir diese NPM-Pakete
Dann kontrollieren wir auf die Richtigkeit des API Keys.
Erstellen einen Contentful Webhook
Der letzte Schritt besteht darin, den neuen Webhook in Contentful einzurichten, sodass wir Änderungen/Löschungen an den neu erstellten Index „example_dev“ weiterleiten.
Hier eine Detailübersicht hinsichtlich der Erstellung des Webhook, welcher die Daten von Contentful über unseren Endpunkt, Richtung Algolia pushen wird.
der zweite Screenshot zeigt den zweiten Webhook für das sog. "unpublish" der Daten. Wenn ein Datensatz in Contentful gelöscht oder auf "unpublish" gesetzt wird, dann muss dies ebenfalls an Algolia übermittelt werden.
In diesem Tutorial habe ich das Projekt, das ich in den vorherigen Schritten erstellt habe, als Grundlage verwendet und daraufhin die Synchronisation zwischen Contentful und Algolia aufgebaut.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.
