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 abzurufengetTranslations unterstützt:
- Übersetzung von String- und JSX-Inhalten.
- Variableneinsetzung 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
| Prop | Beschreibung |
|---|---|
id | Ein 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>| Name | Type | Description |
|---|---|---|
id | string | Die 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.
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.
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}.
const dictionary = {
greeting: "Hallo, {userName}!",
};
export default dictionary;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.
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:
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
getTranslationsermöglicht den Zugriff auf Wörterbuchübersetzungen auf der Server-Seite.
Nächste Schritte
- Siehe
useTranslationsfür das clientseitige Pendant zugetTranslations.
Wie ist diese Anleitung?