Verwendung der <T>-Komponente
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 Grunde lässt sich das in zwei Schritte gliedern:
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.
Das Schöne ist, dass das nur einmal gemacht werden muss.
import { GTProvider } from 'gt-next'
...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="de">
<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 übermitteln.
Immer wenn wir eine <T>-Komponente clientseitig rendern möchten, müssen wir sie in einen <GTProvider> einschließen.
Weitere Informationen zum <GTProvider> findest du hier.
Fügen Sie die Komponente <T> hinzu
Der Teil, auf den Sie gewartet haben …
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 eindeutige Kennung (id) 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 kannst jetzt mit der Übersetzung deiner App loslegen!
Wie ist diese Anleitung?