Verwendung der <T> Komponente

Überblick

Es ist endlich an der Zeit, etwas zu übersetzen! Sobald Sie Ihre <T>-Komponenten eingerichtet haben, können Sie Ihre App in jede gewünschte Sprache übersetzen!

Im Grunde genommen lässt sich dies in zwei Schritte unterteilen:

Hinzufügen der <GTProvider>-Komponente

Hinzufügen der <T>-Komponente

Fügen Sie die `<GTProvider>` Komponente hinzu

Beginnen wir damit, die <GTProvider> Komponente zu Ihrer App hinzuzufügen. Das Schöne daran ist, dass dies nur einmal gemacht werden muss.

src/app/layout.tsx

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?

Die <GTProvider> ist dafür verantwortlich, Übersetzungen vom Server an den Client zu übermitteln. Jedes Mal, wenn wir eine <T> Komponente auf der Client-Seite rendern möchten, müssen wir sie in einen <GTProvider> einwickeln.

Sie können mehr über die <GTProvider> Komponente hier lesen.

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 hinzufügen. Vergessen Sie nicht, eine eindeutige Identifikatorzeichenfolge hinzuzufügen, die als ID für die Übersetzung dient.

src/app/page.tsx

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, Ihre App zu übersetzen!

Verwendung der <T> Komponente

Überblick

Fügen Sie die <GTProvider> Komponente hinzu

Fügen Sie die <T> Komponente hinzu

Auf dieser Seite

Fügen Sie die `<GTProvider>` Komponente hinzu

Fügen Sie die `<T>` Komponente hinzu