Wie Sie Ihre i18next JSON-Übersetzungen mit Intlayer automatisieren

Was ist Intlayer?

Intlayer ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für das Content-Management in JavaScript-Anwendungen.

Sehen Sie einen konkreten Vergleich mit i18next in unserem Blogbeitrag next-i18next vs. next-intl vs. Intlayer.

Warum Intlayer mit i18next kombinieren?

Während Intlayer eine ausgezeichnete eigenständige i18n-Lösung bietet (siehe unseren Next.js-Integrationsleitfaden), möchten Sie es möglicherweise aus mehreren Gründen mit i18next kombinieren:

1. Bestehender Codebestand: Sie haben eine etablierte i18next-Implementierung und möchten schrittweise auf die verbesserte Entwicklererfahrung von Intlayer migrieren.
2. Altsystem-Anforderungen: Ihr Projekt erfordert Kompatibilität mit bestehenden i18next-Plugins oder Workflows.
3. Teamvertrautheit: Ihr Team ist mit i18next vertraut, möchte jedoch ein besseres Content-Management.

Dafür kann Intlayer als Adapter für i18next implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und mehr.

Dieser Leitfaden zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem von Intlayer nutzen und gleichzeitig die Kompatibilität mit i18next beibehalten.

Inhaltsverzeichnis

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit i18next

Schritt 1: Abhängigkeiten installieren

Installieren Sie die notwendigen Pakete:

npm install intlayer @intlayer/sync-json-plugin

Paketbeschreibungen:

• intlayer: Kernbibliothek für Internationalisierungsmanagement, Content-Deklaration und Build-Prozesse
• @intlayer/sync-json-plugin: Plugin zum Exportieren von Intlayer-Content-Deklarationen in ein i18next-kompatibles JSON-Format

Schritt 2: Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON

Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:

Wenn Sie auch JSON-Wörterbücher für i18next exportieren möchten, fügen Sie das syncJSON-Plugin hinzu:

import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,    }),  ],};export default config;

Das syncJSON-Plugin wird das JSON automatisch umschließen. Es liest und schreibt die JSON-Dateien, ohne die Inhaltsarchitektur zu verändern.

Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Content-Deklarationsdateien (.content-Dateien) koexistiert, geht Intlayer wie folgt vor:

1. Lädt sowohl JSON- als auch Content-Deklarationsdateien und transformiert sie in ein Intlayer-Wörterbuch.

2. Wenn es Konflikte zwischen den JSON- und den Inhaltsdeklarationsdateien gibt, wird Intlayer alle Wörterbücher zusammenführen. Dies geschieht abhängig von der Priorität der Plugins und der der Inhaltsdeklarationsdatei (alle sind konfigurierbar).

Wenn Änderungen über die CLI zur Übersetzung des JSON oder über das CMS vorgenommen werden, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.

Git-Konfiguration

Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:

# Dateien, die von Intlayer generiert werden, ignorieren.intlayer

Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle aufgenommen werden.

VS Code Erweiterung

Für eine verbesserte Entwicklererfahrung installieren Sie die offizielle Intlayer VS Code Erweiterung:

Installieren Sie sie aus dem VS Code Marketplace

Git-Konfiguration

Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:

# Dateien, die von Intlayer generiert werden, ignorieren.intlayer

Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle aufgenommen werden.

VS Code Erweiterung

Für eine verbesserte Entwicklererfahrung installieren Sie die offizielle Intlayer VS Code Erweiterung:

Installation aus dem VS Code Marketplace