Überblick

useTranslations dient dazu, Textübersetzungen aus dem Wörterbuch abzurufen.

Es muss innerhalb einer Komponente verwendet werden, die von einem <GTProvider> umschlossen ist.

const d = useTranslations(); // Übersetzungsfunktion abrufen
d('greeting.hello'); // id übergeben, um Übersetzung zu erhalten

Für asynchrone Komponenten siehe getTranslations.

Referenzen

Parameter

Beschreibung

Rückgabewert

Eine Übersetzungsfunktion d, die bei Angabe einer id die übersetzte Version des entsprechenden Eintrags zurückgibt

(id: string, options?: DictionaryTranslationOptions) => React.ReactNode

Beispiele

Grundlegende Wörterbuchnutzung

Jeder Eintrag in Ihrem Wörterbuch wird übersetzt.

const Wörterbuch = {
  greeting: "Hallo, Bob", 
};
export default dictionary;

Wenn wir auf diese Einträge (clientseitig) zugreifen möchten, rufen wir useTranslations auf. Diese Funktion wird mit dem Schlüssel einer Übersetzung aus dem Wörterbuch aufgerufen.

import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const d = useTranslations(); 
  return (
    <p>
      {d('greeting')} // Hallo, Alice // [!code highlight]
    </p>
  );
}

Variablen verwenden

Um Werte zu übergeben, müssen Sie (1) einen Bezeichner vergeben und (2) diesen beim Aufruf der Funktion d referenzieren.

In diesem Beispiel verwenden wir {}, um Variablen an die Übersetzungen zu übergeben. Im Wörterbuch vergeben wir den Bezeichner {userName}.

const dictionary = {
  greeting: "Hallo, {userName}!", 
};
export default dictionary;

import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const d = useTranslations();
  
  // Hallo Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice}
    </p>
  );
}

Präfixe verwenden

Wir können Präfixe nutzen, um nur eine Teilmenge des Wörterbuchs zu übersetzen.

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: „Hallo, Bob",
    }
  }
};
export default dictionary;

Weil wir den value 'prefix1.prefix2' zum useTranslations-Hook hinzugefügt haben, werden alle Schlüssel mit prefix1.prefix2 vorangestellt:

import { useTranslations } from 'gt-next';

export default function UserDetails() {
  const d = useTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Hinweise

• Die Funktion useTranslations ermöglicht den Zugriff auf Wörterbuchübersetzungen auf der Clientseite.
• Der Hook useTranslations kann nur innerhalb einer Komponente verwendet werden, die von einer <GTProvider>-Komponente umschlossen ist.

Nächste Schritte

• Weitere Informationen zu serverseitigen Übersetzungen finden Sie unter getTranslations.
• Erfahren Sie mehr über die Verwendung von Wörterbüchern in der Referenz zu Wörterbüchern.