useGT()

Überblick

Die useGT()-Funktion ist ein Hook zum Übersetzen von Strings zur Build-Zeit.

const t = useGT();

<p>{  t('This text will be translated')  }</p>;

Referenz

Parameter

Keine

Rückgabewerte

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

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

Verhalten

Produktion

Während des CD-Prozesses wird jeder Inhalt innerhalb einer t()-Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Dies gewährleistet schnelle Ladezeiten für alle Sprachen, kann aber nur Inhalte übersetzen, die zur Build-Zeit bekannt sind.

Nach der Generierung werden Übersetzungen entweder (1) im CDN gespeichert oder (2) in der Build-Ausgabe Ihrer App gespeichert, je nach Ihrer Konfiguration. Von dort wird der übersetzte Inhalt an Ihre Benutzer ausgeliefert. Wenn eine Übersetzung nicht gefunden wird, wird auf den ursprünglichen Inhalt zurückgegriffen.

Stellen Sie sicher, dass Sie dem Bereitstellungsleitfaden hier folgen.

Entwicklung

Während der Entwicklung übersetzt die t()-Funktion Inhalte auf Anfrage. Dies ist nützlich für die Prototypenerstellung, um zu sehen, wie Ihre App in verschiedenen Sprachen aussehen wird. Denken Sie daran, einen Dev API-Schlüssel zu Ihrer Umgebung hinzuzufügen, um dieses Verhalten zu aktivieren.

Sie werden eine Verzögerung während der On-Demand-Übersetzung in der Entwicklung bemerken. Dies wird bei Produktions-Builds nicht auftreten, es sei denn, Inhalte werden explizit on-demand übersetzt, d.h. mit tx() oder <Tx>.

Beispiel

Grundlegende Verwendung

Sie können useGT() verwenden, um Strings zu übersetzen.

import { useGT } from 'gt-next';

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

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

Hinweis: "Alice" wird in die bevorzugte Sprache des Benutzers übersetzt.

Verwendung von Variablen

Sie können Variablen an Wörterbuchübersetzungen übergeben.

import { useGT } from 'gt-next';

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

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

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

Verwendung des ICU-Nachrichtenformats

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

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 })}
    </p>
  );
}

Notizen

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

Nächste Schritte

• Siehe getGT() für asynchrone String-Übersetzungen zur Buildzeit.
• Für Laufzeit-Übersetzungen siehe tx() und <Tx>.
• Siehe InlineTranslationOptions für weitere Informationen zur Anpassung von Übersetzungen.