useGT()

Überblick

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

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

Referenz

Parameter

Keine

Rückgabewerte

Eine Rückruffunktion, t(), die den bereitgestellten Inhalt übersetzt.

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

Verhalten

Produktion

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

Sobald sie generiert sind, werden Übersetzungen entweder (1) im CDN gespeichert oder (2) im Build-Output Ihrer App, je nach Ihrer Konfiguration. Von dort aus 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 wird die t()-Funktion Inhalte auf Abruf übersetzen. Dies ist nützlich, um zu prototypisieren, 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 bei der Übersetzung auf Abruf während der Entwicklung feststellen. Dies wird bei Produktions-Builds nicht auftreten, es sei denn, Inhalte werden explizit auf Abruf übersetzt, d.h. unter Verwendung von tx() oder <Tx>.

Beispiel

Grundlegende Verwendung

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

"use client";
import { useGT } from 'gt-next/client';
 
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.

"use client";
import { useGT } from 'gt-next/client';
 
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.

Notizen

• Die useGT()-Funktion ist ein clientseitiger Hook, der Zeichenketten übersetzt.
• Übersetzungen von Zeichenketten mit useGT() erfolgen vor der Laufzeit, während des Build-Prozesses (es sei denn, in der Entwicklung).

Nächste Schritte

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