BlogDashboard

Dynamische Inhalte

So übersetzen Sie Laufzeitinhalte mit serverseitigen Übersetzungs-APIs

Die Übersetzung dynamischer Inhalte behandelt 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 Strings; beides aus Sicherheitsgründen nur serverseitig.

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

Wann Sie dynamische Übersetzung verwenden sollten

Dynamische Übersetzung ist für Inhalte gedacht, die zur Build‑Zeit wirklich nicht bekannt sein können:

Geeignete Anwendungsfälle

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

In diesen Fällen vermeiden

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>
  );
}

Gemischter Inhalt

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>
      
      {/* Dynamische Nutzungsinhalte */}
      <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 Variablenkomponenten
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 robuste Fehlerbehandlung.

Nächste Schritte

Wie ist diese Anleitung?

Geteilte Strings

So internationalisieren Sie Strings, die in mehreren Komponenten und files verwendet werden

Wörterbücher

Verwendung traditioneller, wörterbuchbasierter Übersetzungsmuster

Auf dieser Seite

Wann Sie dynamische Übersetzung verwenden sollten
Geeignete Anwendungsfälle
In diesen Fällen vermeiden
Schnellstart
JSX-Inhalt mit <Tx>
Einfache Strings mit tx
Nur serverseitig
Beispiele
Nutzergenerierte Inhalte
Externe API-Daten
Gemischter Inhalt
Häufige Probleme
Übermäßige Nutzung vermeiden
Auswirkungen auf das API‑Kontingent
Nächste Schritte