Lokale Übersetzungen

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): Übersetzungen werden zur Laufzeit von einem CDN abgerufen.

Standardmäßig ruft gt-react Übersetzungen vom General Translation CDN ab, und wenn du deine App mit unserer API übersetzt, werden die Übersetzungen automatisch in unserem CDN gespeichert.

In React empfehlen wir besonders die Verwendung der CDN-Option. Die Nutzung eines CDN minimiert die Größe deines App-Bundles.

Übersicht

Dieser Leitfaden zeigt Ihnen, wie Sie Übersetzungen im Bundle Ihrer React-App speichern, anstatt ein externes CDN wie unseres zu verwenden. Das bedeutet, dass die Übersetzungen in Ihrem App-Bundle enthalten sind und Sie nicht auf externe Infrastruktur angewiesen sind.

In diesem Leitfaden führen wir Sie durch:

Die Vor- und Nachteile der Verwendung lokaler Übersetzungen.

Wie Sie lokale Übersetzungen für Ihre React-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-react wird, falls für eine bestimmte Sprache keine Übersetzungen gefunden werden, automatisch auf die Standardsprache zurückgegriffen und der Originalinhalt angezeigt.

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. gefällt dir 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 Ihre React-App bereits mit GT eingerichtet ist.
Falls nicht, schließen Sie bitte zuerst die Schnellstart-Anleitung oder die Projekteinrichtung ab.

Schritte

Fügen Sie eine Datei loadTranslations.[js|ts] unter ./src mit folgendem Inhalt hinzu:

src/loadTranslations.ts

export default async function loadTranslations(locale: string) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}

src/loadTranslations.js

export default async function loadTranslations(locale) {
  const t = await import(`./_gt/${locale}.json`);
  return t.default;
}

Übergeben Sie loadTranslations als Prop an die <GTProvider>-Komponente.

src/App.tsx

import { GTProvider } from 'gt-react';
import loadTranslations from './loadTranslations'; 

export default function App() {
  return (
    <GTProvider loadTranslations={loadTranslations} locales={['es', 'fr']}>
      <YourApp />
    </GTProvider>
  );
}

Führen Sie den folgenden Befehl aus und wählen Sie, wenn Sie gefragt werden, ob Sie Übersetzungen auf dem GT CDN speichern möchten, die Option "Nein".

npx gtx-cli configure

Alternativ können Sie die Datei gt.config.json manuell konfigurieren, um lokale Übersetzungen zu verwenden. Weitere Informationen finden Sie in der Dokumentation zur CLI-Konfiguration.

Wenn Sie nun den Übersetzungsbefehl ausführen, werden die Übersetzungen automatisch heruntergeladen und in Ihren Code integriert.

npx gtx-cli translate

Die Funktion loadTranslations wird dann verwendet, um diese Übersetzungen in Ihre App zu laden.

Abhängig vom verwendeten Framework werden die Übersetzungs-JSONs möglicherweise nicht automatisch im finalen Bundle enthalten. Bitte lesen Sie die Dokumentation Ihres Frameworks, um sicherzustellen, dass die JSONs eingebunden werden.

Das war's! Ihre App lädt nun Übersetzungen nur noch aus Ihren lokalen Dateien.

Weitere Anpassungen

Sie können die Funktion loadTranslations weiter anpassen, um Übersetzungen aus anderen Quellen zu laden, z. B. aus Ihrer Datenbank oder Ihrem eigenen CDN.
Weitere Informationen finden Sie in der Dokumentation zu loadTranslations().

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.

Lokale Übersetzungen

Auf dieser Seite