Lokale Übersetzungen
So richten Sie lokale Übersetzungen für Ihre Next.js-App ein
Was sind lokale Übersetzungen?
Lokale Übersetzungen werden im Bundle deiner App gespeichert, anstatt von einem CDN (Content Delivery Network) abgerufen zu werden.
Angenommen, du hast den Befehl gtx-cli translate
zu deinem CD-Prozess hinzugefügt.
Dadurch werden Übersetzungen im JSON-Format für deine App generiert.
Der letzte Schritt besteht darin, diese Übersetzungen aus unserer API in deine App zu übertragen, damit sie verwendet werden können.
Es gibt zwei Möglichkeiten, dies zu tun:
- Im Bundle deiner App: Nachdem die Übersetzungen generiert wurden, speichere sie im Bundle deiner App.
- In einem CDN (Standard): Rufe die Übersetzungen zur Laufzeit von einem CDN ab.
Standardmäßig ruft gt-next
Übersetzungen vom General Translation CDN ab, und wenn du deine App mit unserer API übersetzt, werden die Übersetzungen automatisch in unserem CDN gespeichert.
Übersicht
Dieser Leitfaden zeigt Ihnen, wie Sie Übersetzungen im Bundle Ihrer Next.js-App speichern können, anstatt ein externes CDN wie unseres zu verwenden. Das bedeutet, dass die Übersetzungen im Code Ihrer App enthalten sind und Sie nicht auf externe Infrastruktur angewiesen sind.
In diesem Leitfaden führen wir Sie durch folgende Schritte:
Die Vor- und Nachteile der Verwendung lokaler Übersetzungen.
Wie Sie lokale Übersetzungen für Ihre Next.js-App einrichten.
Abwägungen
Was sind die Vorteile?
-
Schnellere Ladezeiten: Lokale Übersetzungen werden direkt aus deiner App bereitgestellt, was bedeutet, dass sie schneller laden als Übersetzungen, die von einem CDN bereitgestellt werden.
-
Keine Abhängigkeit von externen Diensten: Die Fähigkeit deiner App, Übersetzungen zu laden, hängt nicht von der Verfügbarkeit eines CDN ab. Mit
gt-next
, falls für eine bestimmte Sprache keine Übersetzungen gefunden werden, fällt die App automatisch auf die Standardsprache zurück und zeigt den Originalinhalt an.
Was sind die Nachteile?
-
Größere Bundle-Größe: Lokale Übersetzungen erhöhen die Bundle-Größe deiner App, da sie zusammen mit deiner App ausgeliefert werden. Das bedeutet, dass deine App beim Nutzer möglicherweise länger zum Laden braucht.
-
Content-Management: Wenn du eine Übersetzung bearbeiten möchtest (z. B. dir gefällt die Formulierung deines Inhalts in einer anderen Sprache nicht), musst du deine App jedes Mal mit der neuen Übersetzung neu deployen, sobald du Änderungen vornimmst.
Einrichtung
Voraussetzungen
Stellen Sie sicher, dass Sie Ihre Next.js-App bereits mit GT eingerichtet haben. Falls nicht, schließen Sie bitte zuerst die Schnellstart-Anleitung ab.
Schritte
Fügen Sie eine loadTranslations.[js|ts]
Datei unter ./src
mit folgendem Inhalt hinzu:
export default async function loadTranslations(locale: string) {
const t = await import(`../public/_gt/${locale}.json`);
return t.default;
}
export default async function loadTranslations(locale) {
const t = await import(`../public/_gt/${locale}.json`);
return t.default;
}
Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus und wählen Sie die Option "No", wenn Sie gefragt werden, ob Sie Übersetzungen im GT CDN speichern möchten.
npx gtx-cli configure
Wenn Sie nach dem Pfad zum Übersetzungsverzeichnis gefragt werden, geben Sie ./public/_gt
ein.
Alternativ können Sie die gt.config.json
Datei manuell konfigurieren, um lokale Übersetzungen zu verwenden.
Weitere Informationen finden Sie in der CLI-Konfiguration Dokumentation.
Wenn Sie nun den Übersetzungsbefehl ausführen, werden Übersetzungen automatisch heruntergeladen und in Ihre Codebasis eingebunden.
npx gtx-cli translate
Die loadTranslations
Funktion wird dann verwendet, um diese Übersetzungen in Ihre App zu laden.
Das war's! Ihre App lädt nun nur noch Übersetzungen aus Ihren lokalen Dateien.
Weitere Anpassungen
Sie können die loadTranslations
Funktion weiter anpassen, um Übersetzungen aus anderen Quellen zu laden, wie z.B. aus Ihrer Datenbank oder Ihrem eigenen CDN.
Weitere Informationen finden Sie in der loadTranslations()
Dokumentation.
Hinweise
- Lokale Übersetzungen sind eine Alternative zum Abrufen von Übersetzungen von einem CDN.
- Es gibt Vor- und Nachteile bei der Verwendung von lokalen Übersetzungen, die im Abschnitt Abwägungen besprochen werden.
Nächste Schritte
- Siehe
loadTranslations()
für weitere Informationen zum Schreiben eines benutzerdefinierten Übersetzungs-Loaders.
Wie ist dieser Leitfaden?