Die Komponente <T>
So internationalisierst du JSX-Komponenten mit der Komponente <T>
Die <T>-Komponente ist das zentrale Werkzeug, um JSX-Inhalte in deiner Next.js-Anwendung zu internationalisieren. Sie umschließt deine JSX-Elemente und übersetzt sie automatisch anhand der Locale des Nutzers.
Schnellstart
Wandeln Sie beliebige statische JSX-Inhalte um, 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 beliebigen JSX-Inhalt 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 sorgfältig lesen.
</div>
</T>Konfigurationsoptionen
Kontext hinzufügen
Geben Sie Übersetzungskontext für mehrdeutige Begriffe an:
<T context="notification popup, not bread">
Klicken Sie auf die Benachrichtigung, um sie zu schließen
</T>Übersetzungs-IDs festlegen
Verwenden Sie explizite IDs für konsistente Übersetzungen:
<T id="welcome-message">
Willkommen zurück!
</T>Wann Sie <T> verwenden sollten
Verwenden Sie <T> ausschließlich für statische Inhalte:
// ✅ Statischer Inhalt funktioniert
<T><button>Hier klicken</button></T>
<T><h1>Willkommen auf unserer Website</h1></T>
// ❌ Dynamischer Inhalt funktioniert nicht
<T><p>Hallo {username}</p></T>
<T><p>Heute ist {new Date()}</p></T>
// ✅ Variable-Komponenten für dynamischen Inhalt verwenden
<T>
<p>Hallo <Var>{username}</Var></p>
</T>Variable- und Branching-Komponenten sind dafür konzipiert, innerhalb von <T> dynamische Inhalte bereitzustellen. Ausführliche Informationen finden Sie in den Anleitungen zu Variable Components und Branching Components.
Beispiele
Einfache Elemente
// Basic text
<T>Hallo, Welt!</T>
// Button with text
<T><Button>Formular absenden</Button></T>
// Heading with 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 Variables
// Statischen Text mit dynamischen Werten kombinieren
<T>
<p>Willkommen zurück, <Var>{user.name}</Var>!</p>
</T>
// Formular mit gemischtem Inhalt
<T>
<label>
E-Mail: <input type="email" placeholder="Geben Sie Ihre E-Mail-Adresse ein" />
</label>
</T>Erfahren Sie mehr über die <Var>-Komponente im Leitfaden zu Variable-Komponenten.
Produktionsumgebung einrichten
Build-Prozess
Fügen Sie Ihrer Build-Pipeline Übersetzungen hinzu:
{
"scripts": {
"build": "npx gtx-cli translate && <...IHR_BUILD_BEFEHL...>"
}
}Verhalten in Entwicklung vs. Produktion
- Entwicklung: Mit einem Dev-API-Schlüssel erfolgen Übersetzungen bei Bedarf, sobald Komponenten gerendert werden. Sie sehen während der Entwicklung Übersetzungen in Echtzeit.
- Produktion: Alle Übersetzungen werden in der Build-Phase vorab erstellt und sind sichtbar, sobald Ihre Anwendung live ist.
Hinterlegen Sie Ihren Entwicklungs-API-Schlüssel in Ihrer Umgebung, um während der Entwicklung Live-Übersetzungen zu aktivieren. Sie können ihn im Dashboard unter API Keys erstellen.
Datenschutzaspekte
Inhalte in <T>-Komponenten werden zur Übersetzung an die GT-API gesendet. Für sensible Daten verwenden Sie Variable Components, um vertrauliche Informationen lokal zu belassen:
// Sicher - sensible Daten bleiben lokal
<T>
Willkommen zurück, <Var>{username}</Var>
</T>Häufige Probleme
Komponenten-Grenzen
<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 /> {/* Inhalte innerhalb werden 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 />Verschachtelte <T>-Komponenten
// ❌ <T>-Komponenten nicht verschachteln
<T>
<T>Hallo Welt</T> {/* Das nicht machen */}
</T>Fehler bei dynamischen Inhalten
Die CLI wirft bei dynamischen Inhalten in <T> einen Fehler. Umhüllen Sie dynamische Werte mit Variable-Komponenten:
// ❌ Falsch - dynamischer Inhalt führt zu Fehlern
<T><p>Hello {username}</p></T>
// ✅ Richtig - Variable-Komponenten verwenden
<T><p>Hello <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 Variable Components – Dynamische Inhalte in JSX-Übersetzungen handhaben
- Leitfaden zu Branching Components – Bedingte Logik in Ihre Übersetzungen einbauen
Wie ist dieser Leitfaden?