Components
GTProvider
API-Referenz für die <GTProvider>-Komponente
Überblick
Die <GTProvider>-Komponente stellt den General Translation (GT)-Kontext für ihre children bereit und ermöglicht ihnen den Zugriff auf übersetzte Inhalte.
Sie ist für alle clientseitigen Übersetzungen in Ihrer Anwendung erforderlich.
Wann verwenden
- Umschließen Sie Ihre gesamte Anwendung mit
<GTProvider>, um Übersetzungen auf dem Client zu aktivieren. - Wenn Sie mit Wörterbüchern arbeiten, können Sie optional eine
idangeben, um die an den Client gesendeten Wörterbuchdaten zu begrenzen und so die Performance bei großen Wörterbüchern zu optimieren. - Die Komponente
<GTProvider>wird sowohl für inline<T>als auch für Wörterbücher verwendet.
Referenz
Props
Prop
Type
Beschreibung
| Prop | Beschreibung |
|---|---|
children | Beliebige Komponente oder übergeordnete Komponenten, die clientseitig übersetzen oder auf Übersetzungsinformationen zugreifen müssen. Dazu gehören alle Komponenten, die <T>, useGT oder andere Übersetzungs‑Utilities verwenden. |
id? | Die ID eines verschachtelten Wörterbuchs, um die an den Client gesendeten Daten zu begrenzen. Das ist hilfreich für große Projekte mit umfangreichen Wörterbüchern. |
Rückgabewert
JSX.Element|undefined, das die an diese Komponente übergebenen children enthält.
Beispiel
Grundlegende Verwendung
Umschließen Sie Ihre Anwendung mit <GTProvider>, um Ihrer App den Übersetzungskontext bereitzustellen.
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<GTProvider> // [!code highlight]
{children}
</GTProvider> // [!code highlight]
</body>
</html>
);
}Verwenden der id-Prop für Teilmengen
Geben Sie die id-Prop an, um die Performance zu optimieren, indem nur eine Teilmenge des Wörterbuchs an den Client gesendet wird.
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html lang="de">
<body>
<GTProvider id="nested.dictionary.key"> // [!code highlight]
{children}
</GTProvider>
</body>
</html>
);
}Hinweise
- In Client-Komponenten muss der
<GTProvider>alle<T>-Komponenten und andere übersetzungsbezogene Komponenten umschließen. Mehr dazu hier. - Für serverseitige Übersetzungen ist
<GTProvider>nicht erforderlich, kann aber dennoch verwendet werden.
Nächste Schritte
- Erfahre mehr über die
<T>-Komponente zum Übersetzen von Text und Komponenten.
Wie ist diese Anleitung?