Überblick

Diese Anleitung beschreibt die Schritte, die nötig sind, 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 derzeit eine andere i18n‑Bibliothek verwendet.
• Grundlegendes Verständnis der Bibliothek gt-react.

Warum migrieren?

Es gibt viele Gründe, Ihr Projekt auf gt-react zu migrieren.

Hier sind nur einige:

• Keine JSON files mehr: Verwalten Sie Übersetzungen nie wieder in JSON files. Ihr gesamter Content lebt direkt im Code, wo er hingehört.
• Automatische Übersetzungen: Generieren Sie hochwertige, kontextbezogene Übersetzungen mit unserem CLI‑Tool. Sie müssen nie wieder auf Übersetzungen warten.
• Experimentieren in der Entwicklung: Experimentieren Sie in der Entwicklung ganz einfach mit Übersetzungen dank Hot‑Reloading für Übersetzungen.

Setup

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 am unkompliziertesten, erfordert aber auch die meisten Codeänderungen auf einmal.

Nachdem Sie Ihr Projekt eingerichtet haben, müssen Sie alle Vorkommen Ihrer alten 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 diese durch useGT.

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

Wenn Ihr alter Code beispielsweise 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>
}

Wenden Sie dies auf alle Instanzen Ihrer alten i18n‑Bibliothek an.

Option 2: Migrieren Sie Ihr Projekt vollständig, verwenden Sie aber weiterhin Wörterbücher aus der alten i18n‑Bibliothek

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

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

Suchen Sie alle Vorkommen Ihrer alten i18n‑Bibliothek, etwa useTranslation‑Hooks, und ersetzen Sie diese durch useTranslations‑Hooks.

Der useTranslations‑Hook verhält sich sehr ähnlich wie useTranslation 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 Projektstammverzeichnis oder im src‑Verzeichnis erstellen. Kopieren Sie den Inhalt Ihrer alten Wörterbuchdatei in diese neue Datei und übergeben Sie sie anschließend an die GTProvider‑Komponente.

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: Vorerst die alte i18n‑Bibliothek weiterverwenden und nur einen Teil deines Projekts auf gt-react migrieren

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

In diesem Fall kannst du ähnlich wie bei Option 2 vorgehen, aber nur einen Teil deines Projekts auf gt-react migrieren.

Du kannst beispielsweise die alte i18n‑Bibliothek für einige Komponenten weiterverwenden und gt-react nur für andere sowie für neue Inhalte einsetzen.

Tipps zur Migration

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

Wann immer es geht, empfehlen wir die Verwendung des useGT-Hooks oder der <T>-Komponente.

So wird das Bearbeiten Ihrer Inhalte künftig deutlich einfacher und Ihre Codebasis 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 bieten ihn an, um die Migration zu erleichtern, empfehlen jedoch nicht, ihn für neue Inhalte zu verwenden.

3. Verwendung von KI

Wenn Sie KI einsetzen, um Ihr Projekt zu migrieren, stellen wir die Dateien LLMs.txt und LLMs-full.txt unter folgenden Links bereit:

• LLMs.txt
• LLMs-full.txt

Diese files 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.