Migration zu gt-next

Überblick

Diese Anleitung führt Sie durch die Internationalisierung Ihrer bestehenden Next.js-App mit gt-next als eigenständige i18n-Bibliothek. Diese Anleitung kann auch verwendet werden, um Ihnen bei der Migration von einer anderen i18n-Bibliothek zu gt-next zu helfen.

Alle Übersetzungen werden in Ihrem Projekt-Repository gespeichert und von Ihnen verwaltet. Darüber hinaus bringen Sie Ihre eigenen Übersetzungen mit. Das bedeutet, Sie müssen keine API-Schlüssel hinzufügen.

Wenn Sie Übersetzungen für Ihre JSON-Dateien automatisch generieren möchten, lesen Sie bitte das CLI-Tool.

Wie es funktioniert

Übersetzungen können in JSON-Dateien namens "Wörterbücher" (en.json, fr.json, usw.) gespeichert werden. Die Schlüssel werden als Referenzen verwendet, und die Werte sind der übersetzte Inhalt:

public/dictionaries/en.json

{
  "greeting": "Hello, World!",
}

public/dictionaries/fr.json

{
  "greeting": "Bonjour, le monde!",
}

Auf Übersetzungen wird dann in Ihrer App mit dem useDict() Hook und der getDict() Funktion verwiesen:

components/MyComponent.js

import { useDict } from 'gt-next/client';
import { getDict } from 'gt-next/server';
 
export default function MyComponent() {
  const d = useDict(); // client-side
  const d = await getDict(); // server-side
  return (
    <div>
      <h1>{d('greeting')}</h1>
    </div>
  );
}

Hinweis: Da diese Übersetzungen von Ihnen verwaltet werden, müssen Sie sie manuell aktualisieren, wenn sich Ihre App weiterentwickelt. Das bedeutet, dass Sie jedes Mal, wenn Sie Inhalte hinzufügen oder ändern, Ihre Übersetzungsdateien aktualisieren müssen.

Erwägen Sie die Verwendung des CLI-Tools, wenn Sie an einer Automatisierung dieses Prozesses interessiert sind.

Einrichtung

1. Übersetzungen aktivieren

Verwenden Sie das withGTConfig() Plugin, um das i18n-Verhalten Ihrer Next.js-App einzurichten.

next.config.js

import { withGTConfig } from 'gt-next';
 
const nextConfig = {
  // Ihre Next.js-Konfiguration
};
 
export default withGTConfig(nextConfig, {
  locales: ['en', 'fr'], // Unterstützte Sprachen (Englisch, Französisch)
});

2. Fügen Sie die Wörterbuch-Ladedatei hinzu

Dieses loadDictionary() ist verantwortlich für das Laden Ihrer Übersetzungen. Alle Übersetzungen werden in verschachtelten JSON-Dateien gespeichert, die Wörterbücher genannt werden.

Hier geben wir an, dass unsere Übersetzungsdateien im Verzeichnis /public/dictionaries/ gespeichert sind.

src/loadDictionary.js

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

3. Wickeln Sie Ihre App in einen `<GTProvider>`

Wickeln Sie Ihre App in einen <GTProvider>, um den Übersetzungskontext zu aktivieren. Dies ermöglicht Ihnen den Zugriff auf Übersetzungen in clientseitigen Komponenten.

layout.js

import { GTProvider } from 'gt-next';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

4. Erstellen Sie Ihre Übersetzungsdateien

Ihre Übersetzungsdateien sollten im Verzeichnis ./public/dictionaries gespeichert werden. Jede Datei sollte nach dem entsprechenden Sprachcode benannt werden, z.B. en.json, fr.json, etc.

public/dictionaries/en.json

{
  "greeting": "Hello, World!",
}

Fügen Sie dann die entsprechenden französischen Wörterbuch-Übersetzungsdateien hinzu:

public/dictionaries/fr.json

{
  "greeting": "Bonjour, le monde!",
}

5. Verwenden Sie Ihre Übersetzungen!

Sie können nun auf Ihre Übersetzungen mit useDict() und getDict() zugreifen.

components/MyComponent.js

import { useDict } from 'gt-next/client';
import { getDict } from 'gt-next/server';
 
export default function MyComponent() {
  const d = useDict(); // client-seitig
  const d = await getDict(); // server-seitig
  return (
    <div>
     {/* en: "Hello, World!"  fr: "Bonjour, le monde!" */}
      <h1>{d('greeting')}</h1> // [!code highlight]
    </div>
  );
}

Tipp: Für weitere Informationen zur Wörterbuchsyntax, wie das Einfügen von Variablen, siehe die Wörterbuchreferenz.

Kompatibilität

Dieser Leitfaden hilft Ihnen bei der Migration von einer anderen i18n-Bibliothek zu gt-next. Das Wörterbuchformat ist im Allgemeinen mit anderen Bibliotheken kompatibel.

Unsere Wörterbücher unterstützen Variablen, Datums- und Zahleninterpolation. Weitere Informationen finden Sie in den Wörterbuchoptionen.

Wenn Ihr Projekt jedoch komplexe Syntax wie Pluralformen oder Verzweigungen verwendet, müssen Sie diese in die gt-next-Syntax konvertieren.

Weitere Informationen zur gt-next-Syntax finden Sie auf der Seite Verzweigungskomponenten.

Notizen

Verwenden Sie gt-next, um Übersetzungen in Ihrem Projekt manuell zu verwalten.
Übersetzungen werden in JSON-Dateien namens "Wörterbücher" gespeichert (en.json, fr.json, etc.).
Verwenden Sie useDict() und getDict(), um auf Ihre Übersetzungen zuzugreifen.

Nächste Schritte

Für weitere Informationen zur Wörterbuchsyntax siehe die Wörterbuchreferenz.
Erwägen Sie die Verwendung des translate-Befehls, wenn Sie daran interessiert sind, den Übersetzungsprozess zu automatisieren.

Migration zu gt-next

Auf dieser Seite