Migration
Erfahren Sie, wie Sie ein Projekt zu gt-next migrieren
Übersicht
In diesem Leitfaden werden die notwendigen Schritte erläutert, um ein Projekt, das bereits eine i18n-Bibliothek verwendet, auf gt-next zu migrieren.
Wir geben außerdem einige Tipps und Empfehlungen, wie die Migration so reibungslos wie möglich gestaltet werden kann.
Voraussetzungen
- Ein Projekt, das derzeit eine andere i18n-Bibliothek verwendet.
- Ein grundlegendes Verständnis der
gt-next-Bibliothek.
Warum migrieren?
Es gibt viele Gründe, warum du dein Projekt zu gt-next migrieren möchtest.
Hier sind nur einige davon:
- Keine JSON-Dateien mehr: Nie wieder Übersetzungen in JSON-Dateien verwalten. Dein gesamter Inhalt befindet sich direkt im Code, 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: Experimentiere ganz einfach mit Übersetzungen in der Entwicklungsumgebung dank Hot-Reloading für Übersetzungen.
Einrichtung
Installieren Sie gt-next und das gtx-cli CLI-Tool.
npm i gt-next
npm i --save-dev gtx-cliyarn add gt-next
yarn add --dev gtx-clibun add gt-next
bun add --dev gtx-clipnpm add gt-next
pnpm add --save-dev gtx-cliErstellen Sie eine gt.config.json Datei im Stammverzeichnis Ihres Projekts, die eine defaultLocale Eigenschaft und ein locales Array enthält.
{
"defaultLocale": "en",
"locales": ["en", "fr", "es"]
}Fügen Sie dann die <GTProvider> Komponente zum Root-Layout Ihrer App hinzu.
import { GTProvider } from 'gt-next'
export default function RootLayout({ children }) {
return (
<html>
<body>
<GTProvider>
{children}
</GTProvider>
</body>
</html>
)
}Als nächstes fügen Sie withGTConfig zu Ihrer next.config.js Datei hinzu.
import withGTConfig from 'gt-next/config'
const nextConfig = {
// Your next.config.ts options
}
export default withGTConfig(nextConfig, {
// Your GT configuration
})Für detailliertere Schritte siehe den Schnellstart-Leitfaden.
An diesem Punkt haben Sie 3 Optionen:
- Migrieren Sie Ihr gesamtes Projekt vollständig zu
gt-nextund entfernen Sie die alte i18n-Bibliothek. - Migrieren Sie Ihr Projekt vollständig, aber verwenden Sie weiterhin Wörterbücher aus der alten i18n-Bibliothek.
- Verwenden Sie vorerst weiterhin die alte i18n-Bibliothek und migrieren Sie nur einen Teil Ihres Projekts zu
gt-next.
Für weitere Details zu jeder Option siehe den Abschnitt Migrationsstrategien.
Migrationsstrategien
Option 1: Vollständige Migration Ihres gesamten Projekts
Diese Option ist die einfachste und erfordert gleichzeitig die meisten Codeänderungen auf einmal.
Nachdem Sie Ihr Projekt eingerichtet haben, müssen Sie nach allen Instanzen Ihrer alten i18n-Bibliothek suchen und diese durch gt-next ersetzen.
Wenn Ihre App React Hooks wie useTranslations verwendet, suchen Sie nach allen Instanzen von useTranslations in Ihrer Codebasis und ersetzen Sie diese durch useGT.
Dann müssen Sie alle String-Schlüssel durch ihre tatsächlichen String-Werte ersetzen.
Wenn Ihr alter Code beispielsweise so aussieht:
{
"hello": {
"description": "Hello, world!"
}
}export default function MyComponent() {
const { t } = useTranslation()
return <div>{t('hello.description')}</div>
}Müssen Sie ihn durch folgendes ersetzen:
export default function MyComponent() {
const t = useGT()
return <div>{t('Hello, world!')}</div>
}
// ODER
export default function MyComponent() {
return <T>Hello, world!</T>
}Tun Sie dies für alle Instanzen Ihrer alten i18n-Bibliothek.
Option 2: Vollständige Migration Ihres Projekts, aber weiterhin Verwendung von Wörterbüchern aus der alten i18n-Bibliothek
Nehmen wir an, Sie möchten Ihr Projekt zu gt-next migrieren, aber Sie möchten weiterhin Wörterbücher aus der alten i18n-Bibliothek verwenden
und GT-Inline-Features nur für neue Inhalte nutzen.
In diesem Fall können Sie etwas Ähnliches wie Option 1 tun:
Finden Sie alle Instanzen Ihrer alten i18n-Bibliothek, wie useTranslations Hooks, und ersetzen Sie diese durch useTranslations Hooks von gt-next.
Der useTranslations Hook verhält sich sehr ähnlich zu useTranslations Hooks in anderen i18n-Bibliotheken, und Sie können ihn auf die gleiche Weise verwenden.
import { useTranslation } from 'react-i18next'
export default function MyComponent() {
const { t } = useTranslation()
return <div>{t('hello.description')}</div>
}import { useTranslations } from 'gt-next'
export default function MyComponent() {
const t = useTranslations()
return <div>{t('hello.description')}</div>
}In Bezug auf die Konfiguration müssen Sie eine dictionary.[js|ts|json] Datei in Ihrem Projektverzeichnis oder src Verzeichnis erstellen.
Kopieren Sie den Inhalt Ihrer alten Wörterbuchdatei in diese neue Datei.
Die Initialisierungsfunktion withGTConfig in next.config.js wird automatisch die Wörterbuchdatei in Ihrem Projektverzeichnis oder src Verzeichnis erkennen.
Siehe den Wörterbücher Leitfaden für weitere Details.
Option 3: Weiterhin die alte i18n-Bibliothek verwenden und nur einen Teil Ihres Projekts zu gt-next migrieren
Diese Option ist die flexibelste und erfordert die wenigsten Codeänderungen auf einmal.
In diesem Fall können Sie etwas Ähnliches wie Option 2 tun, aber nur einen Teil Ihres Projekts zu gt-next migrieren.
Zum Beispiel können Sie die alte i18n-Bibliothek für einige Komponenten weiterhin verwenden und gt-next nur für andere und für neue Inhalte nutzen.
Diese Option wird nicht empfohlen, da Sie zwei verschiedene i18n-Bibliotheken in Ihrem Projekt verwalten müssen, was komplex sein und zu Fehlern führen kann.
Migrationstipps
1. Verwenden Sie den useGT Hook oder die <T> Komponente so oft wie möglich
Wo immer möglich, empfehlen wir die Verwendung des useGT Hooks oder der <T> Komponente.
Dies wird die Bearbeitung Ihrer Inhalte in Zukunft viel einfacher machen und Ihre Codebasis viel lesbarer gestalten.
2. Verwenden Sie den useTranslations Hook für bestehende Inhalte
Der useTranslations Hook ist eine großartige Möglichkeit, Ihre bestehenden Wörterbücher weiter zu verwenden.
Wir bieten ihn als Möglichkeit an, die Migration zu erleichtern, aber wir empfehlen nicht, ihn für neue Inhalte zu verwenden.
3. Verwendung von KI
Wenn Sie KI verwenden, um bei der Migration Ihres Projekts zu helfen, haben wir eine LLMs.txt und LLMs-full.txt verfügbar unter:
Diese Dateien enthalten den vollständigen Inhalt dieser Dokumentation, sodass Ihr KI-Tool Zugang zu allen Informationen hat, die es benötigt, um Ihnen bei der Migration Ihres Projekts zu helfen.
Wie ist dieser Leitfaden?