Sie starten einen Blog oder eine Marketing-Website, und mit der Zeit wächst der Inhalt, und das Projekt wird hoffentlich erfolgreich. Wenn Sie Glück haben,geht einer Ihrer Beiträge viral und bringt viel Traffic auf Ihre Seite. Ihre Besucher möchten mehr über Ihr Projekt und wertvollen Inhalt erfahren.
Spätestens dann ist es Zeit für eine Lösung, die einfach zu integrieren ist, sodass jeder finden kann, wonach er sucht.
In meinem vorherigen Beitrag habe ich eine vollständige Anleitung bereitgestellt, die Sie durch den Synchronisationsprozess von Contentful zu Algolia führt. Algolia bietet 10.000 Suchanfragen pro Monat und 1 Million Datensätze im kostenlosen Tarif, was für neue Projekte viel ist bzw. mehr als ausreichend sein sollte.
Wenn diese Limits nicht ausreichen und Sie mehr benötigen, können Sie die Pay-as-you-go-Lösung wählen.
Hier können Sie bereits einen Blick auf die fertige Seite werfen, welche wir bauen werden -> https://nextjs14-algolia-search.vercel.app/
Im vorherherigen Post haben wir bereits die neuen Env-Variablen zur .env.local hinzugefügt.
Benötigte Umgebungsvariablen
Neue NPM Pakete
Nachdem dies bereits erledigt ist, installieren wir nun die neuen NPM Pakete, welche wir für diese Anleitung benötigen.
Wir haben auch bei TailwindCss ein wenig aufgeräumt und das NPM Paket “@contentful/f36-tokens” deinstalliert, da die verwendeten Farben, seit der Verison 3 von Tailwind bereits im Basispaket enthalten sind.
Hier eine komplette Übersicht der zur Verfügung stehenden Farben complete overview
Das Paket “@contentful/rich-text-plain-text-renderer” wurde auch bereits installiert, da wir es für den Synchprozess zwischen Contentful und Algolia in der vorherigen Anleitung benötigt haben.
Wir starten mit der Anpassung der layout.tsx file im Verzeichnis src/app/[locale]. Unten sehen Sie den neuen Code. Wir haben einen neuen Import “instantsearch.css/themes/satellite-min.css” hinzugefügt und wir übergeben der Header-Komponente den neuen Wert “showBar={true},”.
Anpassung Layout.tsx
Neue "Search" Komponente
Bevor wir die Header-Komponente anpassen, müssen wir zuvor die Search-Komponente (Suchleiste) hinzufügen, “search.component.tsx,”. Welche im "components" Unterverzeichnis “header.” erstellt wird.
GitHub Repo
Wie immer finden Sie den kompletten Code im GitHub Repo -> https://github.com/cloudapp-dev/nextjs14-SEO/tree/nextjs14-part7
In der Header-Komponenten fügen wir einen neuen Import und ein neues Interface hinzu.
und natürlich auch die "Suchleiste".
Wir werden diese Komponenten unseren neuen Suchseiten hinzufügen, daher müssen wir diese neuen Komponenten im Verzeichnis „src/components/search“ erstellen.
Übersetzungen in common.json Dateien hinzufügen
Danch ergänzen wir die fehlenden Übersetzungen in den jeweiligen common.json Dateien, welche wir im Post "Multi-Language" unter src/app/i18n/locales/de-DE/ und src/app/i18n/locales/en-US/ erstellt haben.
Hier die Anpassungen für "de-DE"
und hier für “en-US”
Wir brauchen auch eine neue API (Route), damit wir die Tags aus dem Algolia-Index abrufen können. Wir benötigen diese Tags für die Tag-Cloud, welche auf der Suchergebnisseite angezeigt werden soll.
Neue API (Route) für Algolia Facets
Wir erstellen also eine neue Datei "route.ts" im Verzeichnis src/app/api/search/facets/route.ts
Da wir eine neue ArticleLabel-Komponente innerhalb der neuen card.component.tsx auf der Suchergebnisseite benötigen, müssen wir diese Komponente unter src/components/contentful/ArticleLabel.tsx hinzufügen.
Screenshot, welcher das Artikellabel bzw. Taglabel des jeweilien Suchtreffers zeigt.
Screenshot, welcher die Tags der Tag-Cloud auf der Suchergebnisseite zeigt.
Neue Next.js 14 Seiten hinzufügen
Als letzten Schritt fügen wir die neuen Seiten „search“ und „searchalgolia“ unter src/app/[locale]/search/[searchTerm] hinzu.
und src/app/[locale]/searchalgolia
Damit wir die Attribute für die Komponente “Algolia Snippet Component” in der Komponente algoliasearch.component.tsx nutzen können
müssen wir diese im jeweiligen Aloglia-Index aktivieren bzw. konfigurieren.
Im letzten Schritt aktivieren wir noch die Facets in der Index-Config, da wir diese für die T
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.
