Dictionary Translations

getTranslations

API‑Referenz zur serverseitigen Übersetzungsfunktion getTranslations

Überblick

getTranslations wird verwendet, um Zeichenkettenübersetzungen aus dem Wörterbuch für serverseitige Komponenten abzurufen.

const d = await getTranslations(); // Übersetzungsfunktion abrufen
d('greeting.hello'); // id übergeben, um eine Übersetzung abzurufen

getTranslations unterstützt:

  • Übersetzung von String- und JSX-Inhalten.
    • Variablen­einsetzung und bedingte Logik innerhalb von Übersetzungen.
    • Optionales ID-Präfixing.

Für clientseitige Übersetzungen siehe useTranslations.

getTranslations und useTranslations verwenden ein Wörterbuch, um sämtliche Inhalte für die Übersetzung zu speichern. Dies unterscheidet sich von der Verwendung der <T>-Komponente für Übersetzungen. Wenn Sie ausschließlich <T>-Komponenten für Übersetzungen verwenden möchten, ist dieses Dokument nicht relevant.

Referenzen

Props

Prop

Type

Beschreibung

PropBeschreibung
idEin optionales Präfix, das allen Übersetzungsschlüsseln vorangestellt wird. Das ist hilfreich beim Arbeiten mit verschachtelten Wörterbuchwerten.

Rückgabewert

Ein Promise einer Übersetzungsfunktion d, die für eine angegebene id die übersetzte Version des entsprechenden Entry zurückgibt

Promise<(id: string, options?: DictionaryTranslationOptions) => React.ReactNode>
NameTypeDescription
idstringDie id des zu übersetzenden Entry
options?DictionaryTranslationOptionsÜbersetzungsoptions zur Anpassung des Verhaltens von d.

Beispiele

Grundlegende Wörterbuchnutzung

Jeder Eintrag in Ihrem Wörterbuch wird übersetzt.

dictionary.jsx
const dictionary = {
  greeting: <>Hallo, Alice!</>, 
};
export default dictionary;

Wenn wir auf diese Einträge (auf der Serverseite) zugreifen möchten, rufen wir getTranslations auf. Das gibt eine Funktion zurück, die den Schlüssel einer Übersetzung aus dem Wörterbuch entgegennimmt.

TranslateGreeting.jsx
import { getTranslations } from 'gt-next/server';

export default async function TranslateGreeting() {
  
  const d = await getTranslations(); 

  return (
    <p>
      {d('greeting')} // „Hallo, Alice“ // [!code highlight]
    </p>
  );
}

Verwendung von Variablen

Um Werte zu übergeben, müssen Sie (1) einen Bezeichner vergeben und (2) diesen Bezeichner 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}.

dictionary.jsx
const dictionary = {
  greeting: "Hallo, {userName}!", 
};
export default dictionary;
TranslateGreeting.jsx
import { getTranslations } from 'gt-next/server';

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

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

Präfixe verwenden

Mit Präfixen können wir nur eine Teilmenge des Wörterbuchs abrufen.

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

Da wir den value 'prefix1.prefix2' an die Methode getTranslations übergeben haben, sind alle Keys mit prefix1.prefix2 vorangestellt:

UserDetails.jsx
import { getTranslations } from 'gt-next/server';

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

Hinweise

  • Die Funktion getTranslations ermöglicht den Zugriff auf Wörterbuchübersetzungen auf der Server-Seite.

Nächste Schritte

Wie ist diese Anleitung?