Übersicht

Die Funktion useGT ist ein Hook zum Übersetzen von Zeichenketten zur Build‑Zeit.

const t = useGT();

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

Referenzen

Parameter

Keine

Rückgabe

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

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

Verhalten

Produktion

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

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

Stellen Sie sicher, dass Sie der Bereitstellungsanleitung hier folgen.

Entwicklung

Während der Entwicklung übersetzt die Funktion t Inhalte bei Bedarf. Das ist hilfreich, um zu sehen, wie Ihre App in verschiedenen Sprachen aussieht. Denken Sie daran, Ihrer Umgebung einen Dev-API-Schlüssel hinzuzufügen, um dieses Verhalten zu aktivieren.

Bei bedarfsbasierten Übersetzungen 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 Zeichenketten ü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/der Nutzer:in übersetzt.

Verwendung von variables

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

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 Benutzers ü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 Ihre variables formatieren können.

import { useGT } from 'gt-next';

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

Importieren 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 Strings übersetzt.
• Übersetzungen 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 beim Build.
• Für Übersetzungen zur Laufzeit siehe tx und <Tx>.