Verwendung der <T>-Komponente
Übersetzen wir doch mal!
Überblick
Endlich ist es an der Zeit, etwas zu übersetzen!
Sobald du deine <T>-Komponenten eingerichtet hast, kannst du deine App in jede beliebige Sprache übersetzen!
Im Grunde genommen besteht dies aus zwei Schritten:
Hinzufügen der <GTProvider>-Komponente
Hinzufügen der <T>-Komponente
Füge die <GTProvider> Komponente hinzu
Beginnen wir damit, die <GTProvider> Komponente zu deiner App hinzuzufügen.
Das Schöne daran ist, dass dies nur einmal gemacht werden muss.
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 brauchen wir die <GTProvider> Komponente?
Die <GTProvider> ist dafür verantwortlich, Übersetzungen vom Server an den Client weiterzugeben.
Immer wenn wir eine <T> Komponente auf der Client-Seite rendern möchten, müssen wir sie in einen <GTProvider> einbetten.
Mehr über die <GTProvider> Komponente kannst du hier nachlesen.
Fügen Sie die <T> Komponente hinzu
Der Teil, auf den Sie gewartet haben...
Jetzt müssen wir nur noch ein <T> am Anfang des Inhalts und ein schließendes </T> am Ende einfügen.
Vergessen Sie nicht, eine eindeutige Bezeichner-Zeichenkette als id für die Übersetzung hinzuzufügen.
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;Und das war's! Sie sind jetzt bereit, mit der Übersetzung Ihrer App zu beginnen!
Wie ist dieser Leitfaden?