Die <T>-Komponente
So internationalisieren Sie JSX-Komponenten mit der <T>-Komponente
Die <T>-Komponente ist das zentrale Werkzeug zur Internationalisierung von JSX-Inhalten in Ihrer Next.js-Anwendung. Sie umschließt Ihre JSX-Elemente und übersetzt sie automatisch anhand der locale des Benutzers.
Schnellstart
Konvertieren Sie beliebige statische JSX-Inhalte, indem Sie sie mit <T> umschließen:
import { T } from 'gt-next';
// Vorher
function Greeting() {
return <p>Hallo, Welt!</p>;
}
// Nachher
function Greeting() {
return <T><p>Hallo, Welt!</p></T>;
}Für dynamische Inhalte innerhalb von <T> verwenden Sie Variable Components und Branching Components.
Grundlegende Verwendung
Die <T>-Komponente akzeptiert beliebige JSX-Inhalte als children:
// Einfacher Text
<T>Willkommen in unserer App</T>
// HTML-Elemente
<T><h1>Seitentitel</h1></T>
// Komplexes verschachteltes JSX
<T>
<div className="alert">
<span>Wichtig:</span> Bitte aufmerksam lesen.
</div>
</T>Konfigurationsoptionen
Kontext hinzufügen
Stellen Sie Übersetzungskontext für mehrdeutige Begriffe bereit:
<T context="notification popup, not bread">
Klicken Sie auf die Meldung, um sie zu schließen
</T>Übersetzungs-IDs festlegen
Verwenden Sie explizite IDs für konsistente Übersetzungen:
<T id="welcome-message">
Willkommen zurück, Benutzer!
</T>Wann Sie <T> verwenden sollten
Verwenden Sie <T> nur für statische Inhalte:
// ✅ Statischer Inhalt funktioniert
<T><button>Hier klicken</button></T>
<T><h1>Willkommen auf unserer Website</h1></T>
// ❌ Dynamischer Inhalt führt zu Fehlern
<T><p>Hallo {username}</p></T>
<T><p>Heute ist {new Date()}</p></T>
// ✅ Verwenden Sie Variable-Komponenten für dynamischen Inhalt
<T>
<p>Hallo <Var>{username}</Var></p>
</T>Variable- und Branching-Komponenten sind dafür ausgelegt, innerhalb von <T> dynamische Inhalte bereitzustellen. Details finden Sie in den Anleitungen zu Variable Components und Branching Components.
Beispiele
Einfache Elemente
// Einfacher Text
<T>Hallo, Welt!</T>
// Button mit Text
<T><Button>Formular absenden</Button></T>
// Überschrift mit Styling
<T><h1 className="text-2xl font-bold">Willkommen</h1></T>Komplexe Komponenten
// Navigationsmenü
<T>
<nav className="navbar">
<a href="/about">Über uns</a>
<a href="/contact">Kontakt</a>
</nav>
</T>
// Warnmeldung
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>Ihre Sitzung läuft in 5 Minuten ab</span>
</div>
</T>Mit Variablen
// Statischen Text mit dynamischen Werten kombinieren
<T>
<p>Willkommen zurück, <Var>{user.name}</Var>!</p>
</T>
// Formular mit gemischten Inhalten
<T>
<label>
E‑Mail: <input type="email" placeholder="E‑Mail-Adresse eingeben" />
</label>
</T>Erfahren Sie mehr über die <Var>-Komponente im Leitfaden zu Variablen‑Komponenten.
Produktivumgebung einrichten
Build-Prozess
Fügen Sie Übersetzungen in Ihre Build-Pipeline ein:
{
"scripts": {
"build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
}
}Verhalten in Entwicklung vs. Produktion
- Entwicklung: Mit einem Dev-API-Schlüssel werden Übersetzungen bei der Komponenten-Renderung on demand ausgeführt. Während der Entwicklung sehen Sie Übersetzungen in Echtzeit.
- Produktion: Alle Übersetzungen werden während der Build-Phase vorab erzeugt und sind sichtbar, sobald Ihre Anwendung live ist.
Hinterlegen Sie Ihren Dev-API-Schlüssel in Ihrer Umgebung, um Live-Übersetzungen während der Entwicklung zu aktivieren. Sie können einen im Dashboard unter API Keys erstellen.
Datenschutzaspekte
Inhalte in <T>-Komponenten werden zur Übersetzung an die GT‑API gesendet. Verwenden Sie für sensible Daten Variable Components, um vertrauliche Informationen lokal zu halten:
// Sicher – sensible Daten bleiben lokal
<T>
Willkommen zurück, <Var>{username}</Var>
</T>Häufige Probleme
Komponentengrenzen
<T> übersetzt nur direkte children, nicht den Inhalt innerhalb anderer Komponenten:
// ❌ Falsch – Inhalte innerhalb von Komponenten werden nicht übersetzt
function MyComponent() {
return <p>Dies wird nicht übersetzt</p>;
}
<T>
<h1>Dies wird übersetzt</h1>
<MyComponent /> {/* Inhalt darin wird nicht übersetzt */}
</T>
// ✅ Richtig – jede Komponente einzeln umschließen
function MyComponent() {
return <T><p>Dies wird übersetzt</p></T>;
}
<T><h1>Dies wird übersetzt</h1></T>
<MyComponent />Verschachteln von <T>‑Komponenten
// ❌ <T>-Komponenten nicht verschachteln
<T>
<T>Hallo Welt</T> {/* Nicht so */}
</T>Fehler bei dynamischen Inhalten
Die CLI meldet bei dynamischen Inhalten in <T> einen Fehler. Umschließe dynamische Werte mit Variable-Komponenten:
// ❌ Falsch – dynamische Inhalte gehen kaputt
<T><p>Hallo {username}</p></T>
// ✅ Richtig – Variable-Komponenten verwenden
<T><p>Hallo <Var>{username}</Var></p></T>Siehe den Leitfaden zu Variable Components für den Umgang mit dynamischen Werten und den Leitfaden zu Branching Components für bedingte Inhalte.
Nächste Schritte
- Leitfaden zu Variablen-Komponenten - Dynamische Inhalte in JSX-Übersetzungen handhaben
- Leitfaden zu Verzweigungs-Komponenten - Bedingte Logik zu Ihren Übersetzungen hinzufügen
Wie ist diese Anleitung?