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?

  1. Schnellere Ladezeiten: Lokale Übersetzungen werden direkt aus deiner App bereitgestellt, was bedeutet, dass sie schneller laden als Übersetzungen, die von einem CDN bereitgestellt werden.

  2. 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?

  1. 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.

  2. 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:

src/loadTranslations.ts
export default async function loadTranslations(locale: string) {
  const t = await import(`../public/_gt/${locale}.json`);
  return t.default;
}
src/loadTranslations.js
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?