Überblick

Die Funktion useGT ist ein Hook zum Übersetzen von Strings während des Builds.

const t = useGT();

<p>{  t('Dieser Text wird übersetzt.')  }</p>;

Referenz

Parameter

Keine

Rückgabewert

Eine Callback-Funktion t, die den bereitgestellten Inhalt übersetzt.

(content: string, options?: InlineTranslationOptions) => string

Verhalten

Produktion

Während des CD-Prozesses wird sämtlicher Inhalt innerhalb einer t-Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Das gewährleistet schnelle Ladezeiten für alle Locales, kann jedoch nur Inhalte übersetzen, die zur Build‑Zeit bekannt sind.

Nach der Generierung werden die Übersetzungen entweder (1) im CDN (Content Delivery Network) gespeichert oder (2) im Build‑Output Ihrer App, entsprechend Ihrer Konfiguration. Von dort wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, wird auf den ursprünglichen Inhalt als Standardwert zurückgegriffen.

Befolgen Sie die Bereitstellungsanleitung hier.

Entwicklung

Während der Entwicklung übersetzt die Funktion t Inhalte bei Bedarf. Das ist hilfreich, um zu sehen, wie deine App in verschiedenen Sprachen aussehen wird. Denke daran, deiner Umgebung einen Dev API key hinzuzufügen, um dieses Verhalten zu aktivieren.

Bei bedarfsorientierter Übersetzung in der Entwicklung kann es zu einer Verzögerung kommen. Dies tritt bei Produktions-Builds nicht auf, es sei denn, Inhalte werden ausdrücklich bei Bedarf übersetzt, d. h. mit tx oder <Tx>.

Beispiel

Grundlegende Verwendung

Mit useGT können Sie Strings übersetzen.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hallo, Alice!')}
    </p>
  );
}

Hinweis: „Alice“ wird in die bevorzugte Sprache des Nutzers übersetzt.

Verwendung von Variablen

Sie können Variablen in Wörterbuchübersetzungen verwenden.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hallo, {name}!', { name: 'Alice'  })}
    </p>
  );
}

Hinweis: „Alice“ wird nicht in die bevorzugte Sprache des Nutzers übersetzt, da es sich um eine Variable handelt.

Verwendung des ICU Message Format

gt-next unterstützt das ICU Message Format, mit dem Sie auch Variablen formatieren können.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('{count, plural, =0 {Keine Artikel} =1 {Ein Artikel} other {{count} Artikel}} im Warenkorb', { count: 10 })}
    </p>
  );
}

Import aus gt-next/client

Wenn Sie unter der Direktive "use client" arbeiten, sollten Sie aus gt-next/client statt aus gt-next importieren.

"use client";
import { useGT } from 'gt-next/client';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Hallo, Alice!')}
    </p>
  );
}

Hinweise

• Die Funktion useGT ist ein Hook, der Zeichenketten übersetzt.
• Übersetzungen von Zeichenketten mit useGT erfolgen vor der Laufzeit, während des Build-Prozesses (außer im Development-Modus).

Nächste Schritte

• Siehe getGT für asynchrone String-Übersetzungen während des Builds.
• Für Übersetzungen zur Laufzeit siehe t und <Tx>.