In Teil 1 haben wir die Basis unseres Next.js 14-Projekts erstellt. In Teil 2 haben wir das Frontend mit Contentful als Headless-CMS, Tailwindcss für das Styling und Typescript für die Programmierung erstellt. In Teil 3 haben wir einen Header und Footer hinzugefügt, sowie die sogenannte Entwurfs-/Vorschaufunktionalität, die von Contentful angeboten wird, und nicht zuletzt den heutzutage obligatorischen Umschalter für den Dunkelmodus. In Teil 4 werden wir eine benutzerdefinierte 404-Seite hinzufügen, eine Lade-UI (SVG-Spinner) und wir fügen unserem tailwind.config.ts einige zusätzliche Farben hinzu. In Teil 5 fügen wir Mehrsprachigkeit mit dem Paket i18next und einem Sprachumschalter hinzu. Wir werden zeigen, wie Sie die Internationalisierungsfunktion für Client- und Serverkomponenten nutzen können und natürlich im Zusammenspiel mit Contentful und der GraphQL API.
Hier ist bereits ein Spoiler zum Endergebnis des 5. Teils -> https://nextjs14-internationalization-with-contentful-i18next.vercel.app/
Hinzufügen von neuen NPM Paketen für die Mehrsprachigkeit
Die Pakete sind installiert und wir können loslegen.
Edge Middleware — Verwaltung der Web-Anfragen
Wir werden die Datei middleware.ts direkt unter src erstellen. Edge Middleware (Funktionen) führt Code aus, der ausgeführt wird, bevor eine Anfrage auf einer Website verarbeitet wird, um Ihren Benutzern Geschwindigkeit und Personalisierung zu bieten. Funktionen, die die Edge-Laufzeit verwenden, werden im Datenzentrum ausgeführt, das dem Benutzer am nächsten liegt. In unserem Fall ist das fallbackLng „en-US“ und daher wird dieses URL-Segment mit einen "Redirect" aus dem Pfad entfernt, sodass /en-US/about zu /about wird. Wenn das Locale fehlt, führen wir einen "Rewrite" durch, sodass unser Blog das Locale (fallbackLng) erhält.
Jetzt fügen wir den Ordner i18n unter src/app hinzu. Dieser Ordner hat einen Unterordner namens locales, in dem wir einen neuen Unterordner für jedes Locale erstellen, das wir behandeln möchten.
In diesen Beispiel fügen wir die Sprache “de-DE” hinzu. In der Datei common.json verwalten wir die Übersetzungen für Labels, Buttons usw. Die restlichen Übersetzungen werden innerhalb Contentful verwaltet.
Es gibt drei zusätzlche Dateien im Ordner “i18n”:
client.ts
Übersetzungen für Client Komponenten
server.ts
Übersetzungen für Server Komponenten
settings.ts
(Generelle Optionen)
Wir importieren "useTranslation" für die Client Komponenten und "createTranslation" für die Server Komponenten.
or
common bezieht sich auf den namespace "common" -> common.json unter src/app/i18n/locales/de-DE/
Eine neue Sprache (de-DE) in Contentful hinzufügen
Jetzt springen wir kurz zu Contentful, da wir eine neue Sprache hinzufügen müssen.
Nun können wir das Post “TestBlogPost” öffnen und die zweite Sprache aktivieren.
Falls noch nicht bei der Erstellung des Inhaltstyps geschehen, müssen Sie die Lokalisierung des Feldes aktivieren, das dies benötigt, wie den Titel, Untertitel, Inhalt usw.
Bitte überprüfen Sie Ihre Inhalte, fügen Sie den benötigten übersetzten Inhalt hinzu und veröffentlichen Sie sie erneut, damit wir die Inhaltsobjekte in beiden Sprachen bereit haben.
Neue/angepasste/gelöschte Komponenenten/Seiten
Jetzt werden wir einen neuen Ordner [locale] unter src/app hinzufügen. Verschieben Sie den Ordner [slug] und die Dateien page.tsx und layout.tsx in diesen neuen Ordner und erstellen Sie die Datei layout.tsx unter src/app.
Schauen wir uns die verschobene Datei layout.tsx, jetzt im Verzeichnis src/app/[locale] etwas genauer an.
Wir haben den Import hinzugefügt
und wir übergeben einen neuen Typ „LayoutProps“ mit unseren "Children" und dem Locale darin. Wir verwenden diesen neuen Typ dann in unserer Layout-Funktion, weil wir das Locale-Prop an unsere Funktionen/Komponenten übergeben müssen.
Unsere GraphQL Dateien wurden bereits mit der Variable “locale” vorbereitet
Jetzt können wir den Inhalt in der richtigen Sprache abfragen.
Als letzten Schritt müssen wir unsere Seiten/Komponenten ändern, damit die neue Sprache richtig funktioniert.
Hier alle geänderten Dateien.
Sprachenumschalter
Wir fügen neuen Code zu unserer navbar.component.tsx für den Sprachumschalter hinzu. Oben fügen wir diese neuen Importe hinzu:
Unterhalb “export default function Navbar…..” fügen wir diese neuen Konstanten hinzu und die asynchrone Funktion für den Sprachwechsel.
Im Bereich “Desktop View” fügen wir die neue locale für unsere Links hinzu.
Und natürlich auch den Code für das eigentliche Sprachenauswahlmenü.
Tipp: Diese hübschen Flaggen können Sie hier finden -> https://emojipedia.org/
Die Icons von emojipedia machen sich auch bei den Inhaltstypen in Contentful sehr gut. Einfach den Inhaltstyp bearbeiten und per copy & paste das Icon ins Feld einfügen und speichern.
Wie immer finden Sie unten den Link zum Github Repo mit allen Codebeispielen bzw. dem kompletten Projekt, welches auch eine aktualisierte export.json für den Contenfulimport bereitstellt. Bleiben Sie dran, denn in den nächsten Beiträgen werden wir noch diese Funktionen umsetzen:
On-Site-Suche mit Algolia (Erweiterte Datensynchronisation zwischen Contentful und Algolia über eine Azure Logic App)
Hinzufügen eines neuen Seiteninhalts-Typs zusätzlich zu einem deep dive mit GraphQL
Registrierung/Anmeldung/Benutzerrollenverwaltung mit Next-Auth und Azure Entra ID
und vieles mehr. Wie immer werden wir nur Dienste im kostenlosen Tarif nutzen
Wenn Ihnen gefällt, was Sie sehen, dann unterstützen Sie mich bitte mit einem "Clap" oder folgen Sie mir auf medium.com.
Github Repo mit vollständigen Code
https://github.com/cloudapp-dev/nextjs14-typescript-app-router-contentful/tree/nextjs14-part5
