getTranslations()

Überblick

getTranslations() wird verwendet, um String-Übersetzungen aus dem Übersetzungswörterbuch für serverseitige Komponenten zu erhalten.

const d = await getTranslations(); // Holt die Übersetzungsfunktion
d('greeting.hello'); // übergibt die ID, um eine Übersetzung zu erhalten

getTranslations() unterstützt:

Übersetzung von String- und JSX-Inhalten.
Variableneinfügung und bedingte Logik innerhalb von Übersetzungen.
Optionale ID-Präfixierung.

Für clientseitige Übersetzungen siehe useTranslations().

getTranslations() und useTranslations() verwenden ein Wörterbuch, um alle Inhalte für die Übersetzung zu speichern. Dies unterscheidet sich von der Verwendung der <T> Komponente für die Übersetzung. Wenn Sie nur <T> Komponenten für die Übersetzung verwenden möchten, dann ist dieses Dokument nicht relevant.

Referenz

Props

Prop	Type	Default
`id??`	`string`	`undefined`

Beschreibung

Prop	Beschreibung
`id`	Ein optionales Präfix, das allen Übersetzungsschlüsseln vorangestellt wird. Dies ist nützlich für die Arbeit mit verschachtelten Wörterbucheinträgen.

Rückgabe

Ein Promise einer Übersetzungsfunktion d(), die bei Angabe einer ID die übersetzte Version des entsprechenden Eintrags zurückgibt

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

Name	Typ	Beschreibung
`id`	`string`	Die ID des zu übersetzenden Eintrags
`options?`	`DictionaryTranslationOptions`	Übersetzungsoptionen zur Anpassung des Verhaltens von `d()`.

Beispiele

Grundlegende Verwendung

Jeder Eintrag in Ihrem Wörterbuch wird übersetzt.

dictionary.jsx

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

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

TranslateGreeting.jsx

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

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

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

Verwendung von Variablen

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

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

dictionary.jsx

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

TranslateGreeting.jsx

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

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

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

Verwendung von Präfixen

Wir können Präfixe verwenden, um nur eine Teilmenge des Wörterbuchs abzurufen.

dictionary.jsx

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

Da wir den Wert 'prefix1.prefix2' zur getTranslations-Methode hinzugefügt haben, werden alle Schlüssel 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>
  );
}

Notizen

Die getTranslations() Funktion ermöglicht es Ihnen, auf Wörterbuch-Übersetzungen auf der Serverseite zuzugreifen.

Nächste Schritte

Siehe useTranslations() für das clientseitige Äquivalent von getTranslations().
Erfahre mehr über die Verwendung von Wörterbüchern in der Wörterbuch-Referenz.

getTranslations()

Auf dieser Seite