Dynamische Inhalte übersetzen

Übersicht

Dieser Leitfaden führt Sie durch die Verwendung der <Tx> Komponente und der tx() Funktion, um dynamische Inhalte in Next.js Server-Komponenten zu übersetzen.

Am Ende dieses Leitfadens werden Sie die richtige Syntax für die Verwendung dieser Komponenten und Funktionen kennen.

Wir behandeln die folgenden Themen:

Was ist dynamischer Inhalt?

Dynamischer Inhalt ist Inhalt, der zur Build-Zeit nicht bekannt ist.

Dazu können Dinge wie Variablen, Benutzernamen, Eingabefelder usw. gehören.

Zum Beispiel ist Folgendes ein dynamischer Inhalt:

const username = 'John Doe';
<p>Your username is {username}</p>

Wann sollten Sie dynamische Inhalte übersetzen?

In den meisten Fällen können Sie Variable Components oder Branching Components verwenden, um dynamische Inhalte zu verarbeiten.

Diese Komponenten sind dafür ausgelegt, dynamische Inhalte mit der <T>-Komponente zu handhaben, und daher empfehlen wir, sie wann immer möglich zu verwenden.

Es gibt jedoch einige Fälle, in denen Sie dynamische Inhalte bei Bedarf übersetzen müssen.

Zum Beispiel, wenn Sie eine Chat-Nachricht haben, die von einem Benutzer erstellt wurde und Sie diese in einer anderen Sprache anzeigen möchten, können Sie gt-next verwenden, um sie bei Bedarf zu übersetzen.

So verwenden Sie die <Tx> Komponente

import { Tx } from 'gt-next';

const message = 'Hello, world!';
<Tx>{message}</Tx>

Wickeln Sie einfach beliebigen JSX-Inhalt, den Sie übersetzen möchten, mit der <Tx> Komponente ein.

Die <Tx> Komponente übersetzt den Inhalt dann bei Bedarf und rendert den übersetzten Inhalt asynchron.

Weitere Informationen finden Sie in der API-Referenz.

So verwenden Sie die tx()-Funktion

Die tx()-Funktion ist eine serverseitige Funktion, mit der Sie Zeichenfolgen dynamisch übersetzen können.

import { tx } from 'gt-next/server';

const message = 'Hello, world!';
const translatedMessage = await tx(message);

Die tx()-Funktion gibt ein Promise zurück, das auf die übersetzte Zeichenfolge aufgelöst wird.

Weitere Informationen finden Sie in der API-Referenz.

Beispiele

Dynamische Inhalte rendern

import { Tx } from 'gt-next';

export default function ChatMessage({ message }: { message: ReactNode }) {
  return (
    <Tx>{message}</Tx>
  );
}

Einen String übersetzen

import { tx } from 'gt-next/server';

export default async function ChatMessage({ message }: { message: string }) {
  const translatedMessage = await tx(message);
  return (
    <div>{translatedMessage}</div>
  );
}

Produktionsüberlegungen

Das Verhalten der <Tx>-Komponente und der tx()-Funktion ist in der Entwicklung genauso wie in der Produktion.

Unabhängig davon, welchen Typ von API-Schlüssel Sie verwenden, bleibt das Verhalten gleich. In beiden Fällen werden Übersetzungen live und bei Bedarf durchgeführt.

Häufige Fallstricke

Unnötige Verwendung von <Tx> und tx()

Wenn du die <Tx>-Komponente oder die tx()-Funktion verwendest, solltest du dies nur tun, wenn du wirklich keine Möglichkeit hast, Variable Components oder Branching Components mit der <T>-Komponente zu nutzen.

Die Verwendung von <Tx> und tx(), wenn es nicht nötig ist, verschwendet Ressourcen und verbraucht schnell dein API-Kontingent.

Außerdem wird dein Inhalt langsamer gerendert, da die Übersetzungen bei Bedarf durchgeführt werden.