Überblick

Diese Anleitung zeigt Schritt für Schritt, wie Sie Strings in Ihrer Next.js-App mit useGT, getGT und tx übersetzen.

Voraussetzungen

Wir setzen voraus, dass Sie gt-next bereits in Ihrem Projekt installiert haben und dem Schnellstartleitfaden gefolgt sind oder ihm gerade folgen.

Übersetzen von Zeichenketten

Clientseitige Komponenten

Für alle clientseitigen Strings verwenden Sie useGT. Beachten Sie, dass useGT innerhalb einer untergeordneten Komponente von <GTProvider> aufgerufen werden muss.

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Das ist ein Text, der übersetzt wird')}</h1> // [!code highlight]
    </div>
  );
}

Serverkomponenten

Für alle serverseitigen Zeichenketten verwenden Sie getGT.

import { getGT } from 'gt-next/server';

export default async function Home() {
  const t = await getGT(); 
  return (
    <div>
      <h1>{t('Das ist ein String, der übersetzt wird')}</h1> // [!code highlight]
    </div>
  );
}

Variablen hinzufügen

Variablen sind Werte, die sich ändern können, aber nicht übersetzt werden. Um Variablen zu deinen Zeichenketten hinzuzufügen, verwende das folgende Muster:

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT();
  return (
    <div>
      <h1>{t('Hallo {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}

Das funktioniert sowohl mit useGT als auch mit getGT.

Dynamische Inhalte

Angenommen, Sie haben eine Zeichenfolge, die sich ändert. Sie können die Funktion tx verwenden, um die Zeichenfolge zur Laufzeit zu übersetzen.

import { tx } from 'gt-next/server';

export default async function MyComponent({ username }) {
  const translation = await tx(`Hallo, ${username}. Wie geht es dir heute?`); 
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}

Hinweise

• Zum Übersetzen von Strings verwenden Sie useGT, getGT und tx.
• useGT und getGT übersetzen vor der Bereitstellung, wohingegen tx zur Laufzeit übersetzt. Verwenden Sie tx sparsam.
• Variablen können mithilfe des Musters { variables: { key: value } } zu Strings hinzugefügt werden.

Nächste Schritte

• Kehren Sie zum Schnellstartleitfaden zurück, um die Einrichtung Ihres Projekts für die Übersetzung abzuschließen.
• Siehe die API-Referenz zu useGT, getGT und tx.