GitHub

Die Übersetzung dynamischer Inhalte betrifft Text, der zur Build‑Zeit nicht verfügbar ist – etwa nutzergenerierte Inhalte, API-Antworten oder Datenbankeinträge. Verwenden Sie <Tx> für JSX-Inhalte und tx für einfache Zeichenketten – beide ausschließlich serverseitig aus Sicherheitsgründen.

Sparsam einsetzen: Dynamische Übersetzung verbraucht API-Kontingente und erhöht die Latenz. Bevorzugen Sie nach Möglichkeit <T>-Komponenten mit Variable-Komponenten.

Wann dynamische Übersetzung verwenden

Dynamische Übersetzung ist für Inhalte gedacht, die zur Build-Zeit tatsächlich nicht bekannt sein können:

Geeignete Anwendungsfälle

Nutzergenerierte Inhalte: Chatnachrichten, Bewertungen, Social-Media-Posts
Externe API-Antworten: Daten von Drittanbietern, RSS-Feeds, externe Dienste
Datenbankeinträge: Dynamische CMS-Inhalte, Nutzerprofile aus APIs
Echtzeitdaten: Live-Benachrichtigungen, Statusmeldungen

In diesen Fällen vermeiden

Benutzernamen, Kontonummern → Verwenden Sie <Var>
Bedingte Nachrichten → Verwenden Sie Branch-Komponenten
Formularvalidierung → Verwenden Sie String-Übersetzung
Statische Konfiguration → Verwenden Sie geteilte Strings

Schnellstart

JSX-Inhalt mit `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

Einfache Strings mit `tx`

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

Nur serverseitig

Sowohl <Tx> als auch tx sind aus Sicherheitsgründen ausschließlich serverseitig verfügbar:

// ✅ Server-Komponente
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Client-Komponente - funktioniert nicht
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Fehler!
  return <div>{translated}</div>;
}

Beispiele

Nutzergenerierte Inhalte

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

Externe API-Daten

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

Gemischte Inhalte

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Statischer Inhalt mit Variablen */}
      <T>
        <p><Var>{review.author}</Var> hat dies mit <Var>{review.rating}</Var> Sternen bewertet</p>
      </T>
      
      {/* Dynamischer Benutzerinhalt */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

Häufige Probleme

Übermäßige Nutzung vermeiden

Verwenden Sie keine dynamische Übersetzung für Inhalte, die mit Standardkomponenten umgesetzt werden können:

// ❌ Unnötig
const content = `Hallo, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Verwenden Sie stattdessen Variable-Komponenten
return (
  <T>
    <p>Hallo, <Var>{userName}</Var>!</p>
  </T>
);

Auswirkungen auf das API‑Kontingent

Dynamische Übersetzungen verbrauchen bei jeder Anfrage API‑Kontingent. Setzen Sie in Produktionsumgebungen auf Caching und Fehlerbehandlung.

Nächste Schritte

Leitfaden für lokale Übersetzungen - Übersetzungen ohne API-Aufrufe
Middleware-Leitfaden - Spracherkennung und Routing
API Reference:
- <Tx> Component

Sparsam einsetzen: Dynamische Übersetzung verbraucht API-Kontingente und erhöht die Latenz. Bevorzugen Sie nach Möglichkeit <T>-Komponenten mit Variable-Komponenten.

Wann dynamische Übersetzung verwenden

Dynamische Übersetzung ist für Inhalte gedacht, die zur Build-Zeit tatsächlich nicht bekannt sein können:

Geeignete Anwendungsfälle

Nutzergenerierte Inhalte: Chatnachrichten, Bewertungen, Social-Media-Posts
Externe API-Antworten: Daten von Drittanbietern, RSS-Feeds, externe Dienste
Datenbankeinträge: Dynamische CMS-Inhalte, Nutzerprofile aus APIs
Echtzeitdaten: Live-Benachrichtigungen, Statusmeldungen

In diesen Fällen vermeiden

Benutzernamen, Kontonummern → Verwenden Sie <Var>
Bedingte Nachrichten → Verwenden Sie Branch-Komponenten
Formularvalidierung → Verwenden Sie String-Übersetzung
Statische Konfiguration → Verwenden Sie geteilte Strings

Schnellstart

JSX-Inhalt mit `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

Einfache Strings mit `tx`

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

Nur serverseitig

Sowohl <Tx> als auch tx sind aus Sicherheitsgründen ausschließlich serverseitig verfügbar:

// ✅ Server-Komponente
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Client-Komponente - funktioniert nicht
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Fehler!
  return <div>{translated}</div>;
}

Beispiele

Nutzergenerierte Inhalte

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

Externe API-Daten

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

Gemischte Inhalte

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Statischer Inhalt mit Variablen */}
      <T>
        <p><Var>{review.author}</Var> hat dies mit <Var>{review.rating}</Var> Sternen bewertet</p>
      </T>
      
      {/* Dynamischer Benutzerinhalt */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

Häufige Probleme

Übermäßige Nutzung vermeiden

Verwenden Sie keine dynamische Übersetzung für Inhalte, die mit Standardkomponenten umgesetzt werden können:

// ❌ Unnötig
const content = `Hallo, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Verwenden Sie stattdessen Variable-Komponenten
return (
  <T>
    <p>Hallo, <Var>{userName}</Var>!</p>
  </T>
);

Auswirkungen auf das API‑Kontingent

Dynamische Übersetzungen verbrauchen bei jeder Anfrage API‑Kontingent. Setzen Sie in Produktionsumgebungen auf Caching und Fehlerbehandlung.

Nächste Schritte

Leitfaden für lokale Übersetzungen - Übersetzungen ohne API-Aufrufe
Middleware-Leitfaden - Spracherkennung und Routing
API Reference:
- <Tx> Component

Sparsam einsetzen: Dynamische Übersetzung verbraucht API-Kontingente und erhöht die Latenz. Bevorzugen Sie nach Möglichkeit <T>-Komponenten mit Variable-Komponenten.

Wann dynamische Übersetzung verwenden

Dynamische Übersetzung ist für Inhalte gedacht, die zur Build-Zeit tatsächlich nicht bekannt sein können:

Geeignete Anwendungsfälle

Nutzergenerierte Inhalte: Chatnachrichten, Bewertungen, Social-Media-Posts
Externe API-Antworten: Daten von Drittanbietern, RSS-Feeds, externe Dienste
Datenbankeinträge: Dynamische CMS-Inhalte, Nutzerprofile aus APIs
Echtzeitdaten: Live-Benachrichtigungen, Statusmeldungen

In diesen Fällen vermeiden

Benutzernamen, Kontonummern → Verwenden Sie <Var>
Bedingte Nachrichten → Verwenden Sie Branch-Komponenten
Formularvalidierung → Verwenden Sie String-Übersetzung
Statische Konfiguration → Verwenden Sie geteilte Strings

Schnellstart

JSX-Inhalt mit `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

Einfache Strings mit `tx`

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

Nur serverseitig

Sowohl <Tx> als auch tx sind aus Sicherheitsgründen ausschließlich serverseitig verfügbar:

// ✅ Server-Komponente
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Client-Komponente - funktioniert nicht
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Fehler!
  return <div>{translated}</div>;
}

Beispiele

Nutzergenerierte Inhalte

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

Externe API-Daten

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

Gemischte Inhalte

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Statischer Inhalt mit Variablen */}
      <T>
        <p><Var>{review.author}</Var> hat dies mit <Var>{review.rating}</Var> Sternen bewertet</p>
      </T>
      
      {/* Dynamischer Benutzerinhalt */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

Häufige Probleme

Übermäßige Nutzung vermeiden

Verwenden Sie keine dynamische Übersetzung für Inhalte, die mit Standardkomponenten umgesetzt werden können:

// ❌ Unnötig
const content = `Hallo, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Verwenden Sie stattdessen Variable-Komponenten
return (
  <T>
    <p>Hallo, <Var>{userName}</Var>!</p>
  </T>
);

Auswirkungen auf das API‑Kontingent

Dynamische Übersetzungen verbrauchen bei jeder Anfrage API‑Kontingent. Setzen Sie in Produktionsumgebungen auf Caching und Fehlerbehandlung.

Nächste Schritte

Leitfaden für lokale Übersetzungen - Übersetzungen ohne API-Aufrufe
Middleware-Leitfaden - Spracherkennung und Routing
API Reference:
- <Tx> Component

Dynamische Inhalte

Auf dieser Seite

Dynamische Inhalte

Auf dieser Seite

Dynamische Inhalte

Auf dieser Seite

GitHubStern auf GitHub vergeben

GitHubStern auf GitHub vergeben

Stern auf GitHub vergeben

Stern auf GitHub vergeben