Überblick

Dieser Leitfaden zeigt die Schritte, um ein Projekt, das bereits eine i18n‑Bibliothek verwendet, auf gt-react zu migrieren.

Außerdem geben wir Tipps und Empfehlungen, wie Sie die Migration so reibungslos wie möglich gestalten.

Voraussetzungen

• Ein Projekt, das aktuell eine andere i18n-Bibliothek verwendet.
• Grundkenntnisse der Bibliothek gt-react.

Warum migrieren?

Es gibt viele Gründe, dein Projekt auf gt-react umzustellen.

Hier sind nur einige:

• Keine JSON-Dateien mehr: Nie wieder Übersetzungen in JSON-Dateien verwalten. Dein gesamter Content lebt direkt im Code – dort, wo er hingehört.
• Automatische Übersetzungen: Erzeuge hochwertige, kontextbezogene Übersetzungen mit unserem CLI-Tool. Du musst nie wieder auf Übersetzungen warten.
• Experimentieren in der Entwicklung: Probiere Übersetzungen in der Entwicklung einfach aus – mit Hot-Reloading.

Einrichtung

npm i gt-react
npm i gtx-cli

yarn add gt-react
yarn add --dev gtx-cli

bun add gt-react
bun add --dev gtx-cli

pnpm add gt-react
pnpm add --save-dev gtx-cli

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

import { GTProvider } from 'gt-react'
import config from './gt.config.json'

<GTProvider {...config}>
  <App />
</GTProvider>

Migrationsstrategien

Option 1: Migrieren Sie Ihr gesamtes Projekt vollständig

Diese Option ist die naheliegendste, erfordert aber auch die meisten Codeänderungen auf einmal.

Nachdem Sie Ihr Projekt eingerichtet haben, müssen Sie alle Vorkommen Ihrer bisherigen i18n‑Bibliothek suchen und durch gt-react ersetzen.

Wenn Ihre App React-Hooks wie useTranslation verwendet, suchen Sie in Ihrem Code nach allen Vorkommen von useTranslation und ersetzen Sie sie durch useGT.

Anschließend müssen Sie alle String-Schlüssel durch ihre tatsächlichen String-Werte ersetzen.

Wenn Ihr alter Code zum Beispiel so aussieht:

{
  "hello": {
    "description": "Hallo, Welt!"
  }
}

export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

Sie müssen es ersetzen durch:

export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hallo, Welt!')}</div>
}
// OR
export default function MyComponent() {
  return <T>Hallo, Welt!</T>
}

Führen Sie dies für alle Instanzen Ihrer alten i18n‑Bibliothek aus.

Option 2: Migrieren Sie Ihr Projekt vollständig, verwenden Sie aber weiterhin Dictionaries aus der alten i18n-Bibliothek

Angenommen, Sie möchten Ihr Projekt auf gt-react migrieren, aber weiterhin Dictionaries aus der alten i18n-Bibliothek verwenden und GT-Inline-Features nur für neue Inhalte nutzen.

In diesem Fall können Sie ähnlich wie bei Option 1 vorgehen:

Suchen Sie alle Vorkommen Ihrer alten i18n-Bibliothek, zum Beispiel useTranslation-Hooks, und ersetzen Sie sie durch useTranslations-Hooks.

Der useTranslations-Hook verhält sich sehr ähnlich wie die useTranslation-Hooks und kann auf die gleiche Weise verwendet werden.

import { useTranslation } from 'react-i18next'
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}

import { useTranslations } from 'gt-react'
export default function MyComponent() {
  const t = useTranslations()
  return <div>{t('hello.description')}</div>
}

Für die Konfiguration müssen Sie eine Datei dictionary.[js|ts|json] im Projektstamm oder im Verzeichnis src erstellen. Kopieren Sie den Inhalt Ihrer alten Dictionary-Datei in diese neue Datei und übergeben Sie sie anschließend an die Komponente GTProvider.

import { GTProvider } from 'gt-react'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>

Weitere Details finden Sie im Leitfaden zu dictionaries.

Option 3: Die alte i18n-Bibliothek vorerst weiterverwenden und nur einen Teil Ihres Projekts auf gt-react migrieren

Diese Option ist am flexibelsten und erfordert auf einen Schlag die wenigsten Codeänderungen.

In diesem Fall können Sie ähnlich wie bei Option 2 vorgehen, jedoch nur einen Teil Ihres Projekts auf gt-react migrieren.

Beispielsweise können Sie für einige Komponenten weiterhin die alte i18n-Bibliothek verwenden und gt-react nur für andere Komponenten sowie für neue Inhalte einsetzen.

Tipps zur Migration

1. Verwenden Sie den useGT-Hook oder die <T>-Komponente so oft wie möglich

Wo immer es geht, empfehlen wir, den useGT-Hook oder die <T>-Komponente zu verwenden.

So lassen sich Ihre Inhalte künftig deutlich einfacher bearbeiten und Ihr Code wird wesentlich besser lesbar.

2. Verwenden Sie den useTranslations-Hook für bestehende Inhalte

Der useTranslations-Hook ist eine hervorragende Möglichkeit, Ihre bestehenden dictionaries weiterzuverwenden.

Wir stellen ihn bereit, um die Migration zu erleichtern, raten jedoch von der Nutzung für neue Inhalte ab.

3. Verwendung von KI

Wenn Sie KI zur Unterstützung der Migration Ihres Projekts einsetzen, stellen wir die Dateien LLMs.txt und LLMs-full.txt hier bereit:

• LLMs.txt
• LLMs-full.txt

Diese Dateien enthalten den vollständigen Inhalt dieser Dokumentation, sodass Ihr KI-Tool Zugriff auf alle Informationen hat, die es für die Migration Ihres Projekts benötigt.