Verwendung der Komponente <T>
Lassen Sie uns etwas übersetzen!
Überblick
Jetzt wird endlich übersetzt!
Sobald du deine <T>-Komponenten eingerichtet hast, kannst du deine App in jede gewünschte Sprache übersetzen.
Im Wesentlichen läuft es auf zwei Schritte hinaus:
Hinzufügen der <GTProvider>-Komponente
Hinzufügen der <T>-Komponente
Fügen Sie die Komponente <GTProvider> hinzu
Beginnen wir damit, die Komponente <GTProvider> zu Ihrer App hinzuzufügen.
Der Vorteil: Das müssen Sie nur einmal machen.
import { GTProvider } from 'gt-next'
...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<GTProvider> // [!code highlight]
{children}
</GTProvider> // [!code highlight]
</body>
</html>
);
}Warum benötigen wir die <GTProvider>-Komponente?
Der <GTProvider> ist dafür verantwortlich, Übersetzungen vom Server an den Client zu übergeben.
Immer wenn wir eine <T>-Komponente clientseitig rendern wollen, müssen wir sie in einen <GTProvider> einschließen.
Weitere Informationen zur <GTProvider>-Komponente findest du hier.
Fügen Sie die <T>-Komponente hinzu
Darauf haben Sie gewartet …
Jetzt müssen wir nur noch ein <T> an den Anfang des Inhalts und ein schließendes </T> ans Ende setzen.
Vergessen Sie nicht, eine eindeutige Kennzeichnungszeichenfolge hinzuzufügen, die als id für die Übersetzung dient.
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;Und das war’s! Du bist jetzt bereit, mit der Übersetzung deiner App zu starten!
Wie ist dieser Leitfaden?