Dashboard

Strings

So internationalisieren Sie einfache Textstrings mit useGT und getGT

Die String-Übersetzung ermöglicht direkten Zugriff auf Textübersetzungen ohne JSX und eignet sich ideal für Attribute, Objekteigenschaften und einfache Textwerte. Verwenden Sie useGT in synchronen Komponenten und getGT in asynchronen Komponenten.

Synchrone vs. asynchrone Verwendung

  • Synchrone Komponenten: useGT-Hook für React-Komponenten
  • Asynchrone Komponenten: getGT – asynchrone Funktion für asynchrone Komponenten

Schnellstart

Synchrone Komponenten

import { useGT } from 'gt-next';

function MyComponent() {
  const t = useGT();
  return (
    <input 
      placeholder={t('E-Mail eingeben')}
      title={t('E-Mail-Adressfeld')}
    />
  );
}

Asynchrone Komponenten

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

async function MyServerComponent() {
  const t = await getGT();
  return (
    <input 
      placeholder={t('E-Mail eingeben')}
      title={t('E-Mail-Adressfeld')}
    />
  );
}

Wann Sie die Zeichenkettenübersetzung verwenden sollten

Die Zeichenkettenübersetzung ist ideal, wenn Sie einfachen Text statt JSX benötigen:

HTML-Attribute

const t = useGT();

<input 
  placeholder={t('Produkte suchen...')}
  aria-label={t('Produktsuche')}
  title={t('Tippen, um unseren Katalog zu durchsuchen')}
/>

Objekteigenschaften

const t = useGT();

const user = {
  name: 'John',
  role: 'admin',
  bio: t('Erfahrener Softwareentwickler mit 5 Jahren React-Erfahrung'),
  status: t('Derzeit für Projekte verfügbar')
};

Konfiguration & Konstanten

const t = useGT();

const navigationItems = [
  { label: t('Startseite'), href: '/' },
  { label: t('Produkte'), href: '/products' },
  { label: t('Kontakt'), href: '/contact' }
];

Wann Sie stattdessen <T> verwenden sollten

Verwenden Sie die <T>-Komponente für JSX-Inhalte:

// ✅ Verwende <T> für JSX-Inhalte
<T><p>Willkommen in <strong>unserem Shop</strong>!</p></T>

// ✅ Verwende String-Übersetzung für einfachen Text
<input placeholder={t('Produkte suchen')} />

Verwendung von variables

Grundlegende Variablen

Ersetzen Sie Platzhalter durch dynamische Werte:

const t = useGT();
const itemCount = 5;

// String mit Platzhalter
const message = t('Sie haben {count} Artikel in Ihrem Warenkorb', { count: itemCount });
// Ergebnis: „Sie haben 5 Artikel in Ihrem Warenkorb"

Mehrere Variablen

const t = useGT();
const order = { id: 'ORD-123', total: 99.99, date: '2024-01-15' };

const confirmation = t(
  'Bestellung {orderId} über ${total} wurde am {date} aufgegeben',
  { 
    orderId: order.id, 
    total: order.total, 
    date: order.date 
  }
);

ICU Message Format

Für fortgeschrittene Formatierungen verwenden Sie die ICU-Syntax:

const t = useGT();
translate('Es {count, plural, =0 {sind keine Artikel} =1 {ist ein Artikel} other {sind {count} Artikel}} im Warenkorb', { count: 10 });

Erfahren Sie mehr über das ICU Message Format in der Unicode‑Dokumentation.

Beispiele

Formularelemente

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <form>
      <input 
        type="email"
        placeholder={t('E-Mail-Adresse eingeben')}
        aria-label={t('E-Mail-Eingabefeld')}
      />
      <textarea 
        placeholder={t('Erzählen Sie uns von Ihrem Projekt...')}
        aria-label={t('Projektbeschreibung')}
      />
      <button type="submit">
        {t('Nachricht senden')}
      </button>
    </form>
  );
}
import { useGT } from 'gt-next';

function Navigation() {
  const t = useGT();
  
  const menuItems = [
    { label: t('Startseite'), href: '/', icon: 'home' },
    { label: t('Über uns'), href: '/about', icon: 'info' },
    { label: t('Leistungen'), href: '/services', icon: 'briefcase' },
    { label: t('Kontakt'), href: '/contact', icon: 'mail' }
  ];

  return (
    <nav>
      {menuItems.map((item) => (
        <a key={item.href} href={item.href} title={item.label}>
          <Icon name={item.icon} />
          {item.label}
        </a>
      ))}
    </nav>
  );
}

Dynamische Content Factory

// utils/productData.js
export function getProductMessages(t) {
  return {
    categories: [
      { id: 'electronics', name: t('Elektronik') },
      { id: 'clothing', name: t('Bekleidung') },
      { id: 'books', name: t('Bücher') }
    ],
    statusMessages: {
      available: t('Auf Lager und versandbereit'),
      backordered: t('Derzeit nicht vorrätig - Versand in 2-3 Wochen'),  
      discontinued: t('Dieser Artikel wurde eingestellt')
    },
    errors: {
      notFound: t('Produkt nicht gefunden'),
      outOfStock: t('Entschuldigung, dieser Artikel ist derzeit nicht vorrätig')
    }
  };
}

// components/ProductCard.jsx
import { useGT } from 'gt-next';
import { getProductMessages } from '../utils/productData';

function ProductCard({ product }) {
  const t = useGT();
  const messages = getProductMessages(t);
  
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{messages.statusMessages[product.status]}</p>
      <span>{messages.categories.find(c => c.id === product.categoryId)?.name}</span>
    </div>
  );
}

Serverkomponente mit Metadaten

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

export async function generateMetadata({ params }) {
  const t = await getGT();
  
  return {
    title: t('Produktkatalog - Finden Sie, was Sie brauchen'),
    description: t('Durchstöbern Sie unsere umfangreiche Auswahl hochwertiger Produkte'),
    openGraph: {
      title: t('Unsere Produkte'),
      description: t('Entdecken Sie tolle Angebote für bestbewertete Artikel')
    }
  };
}

export default async function ProductPage() {
  const t = await getGT();
  
  return (
    <div>
      <h1>{t('Empfohlene Produkte')}</h1>
      <p>{t('Entdecken Sie unsere neuesten und beliebtesten Artikel')}</p>
    </div>
  );
}

Häufige Probleme

Dynamische Inhalte zur Laufzeit

Strings müssen zur Build-Zeit bekannt sein – dynamische Inhalte lassen sich nicht übersetzen:

// ❌ Dynamischer Inhalt funktioniert nicht
function MyComponent() {
  const [userMessage, setUserMessage] = useState('');
  const t = useGT();
  
  return <p>{t(userMessage)}</p>; // Das wird fehlschlagen
}

// ✅ Vordefinierte Strings verwenden
function MyComponent() {
  const [messageType, setMessageType] = useState('welcome');
  const t = useGT();
  
  const messages = {
    welcome: t('Willkommen in unserer App!'),
    goodbye: t('Danke für Ihren Besuch!')
  };
  
  return <p>{messages[messageType]}</p>;
}

Verstöße gegen Hook-Regeln

Befolgen Sie die Regeln für React-Hooks bei der Verwendung von useGT:

// ❌ Hooks nicht bedingt aufrufen
function MyComponent({ showMessage }) {
  if (showMessage) {
    const t = useGT(); // Hook-Regel-Verstoß
    return <p>{t('Hallo!')}</p>;
  }
  return null;
}

// ✅ Hooks immer auf der obersten Ebene aufrufen
function MyComponent({ showMessage }) {
  const t = useGT();
  
  if (showMessage) {
    return <p>{t('Hallo!')}</p>;
  }
  return null;
}

Verwechslung von synchron und asynchron

Verwenden Sie die passende Funktion für Ihren Komponententyp:

// ❌ Falsch: useGT in asynchroner Komponente
export default async function AsyncComponent() {
  const t = useGT(); // Das funktioniert nicht
  return <p>{t('Hallo')}</p>;
}

// ✅ Richtig: getGT in asynchroner Komponente  
export default async function AsyncComponent() {
  const t = await getGT();
  return <p>{t('Hallo')}</p>;
}

// ✅ Richtig: useGT in synchroner Komponente
export default function SyncComponent() {
  const t = useGT();
  return <p>{t('Hallo')}</p>;
}

Für echte dynamische Inhalte, die zur Laufzeit übersetzt werden müssen, siehe den Leitfaden für dynamische Inhalte.

Nächste Schritte

Wie ist dieser Leitfaden?

Verzweigungskomponenten

Verwendung von Verzweigungskomponenten für bedingte Inhalte in Übersetzungen

Gemeinsame Strings

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

Auf dieser Seite

Synchrone vs. asynchrone Verwendung
Schnellstart
Synchrone Komponenten
Asynchrone Komponenten
Wann Sie die Zeichenkettenübersetzung verwenden sollten
HTML-Attribute
Objekteigenschaften
Konfiguration & Konstanten
Wann Sie stattdessen <T> verwenden sollten
Verwendung von variables
Grundlegende Variablen
Mehrere Variablen
ICU Message Format
Beispiele
Formularelemente
Navigationsmenü
Dynamische Content Factory
Serverkomponente mit Metadaten
Häufige Probleme
Dynamische Inhalte zur Laufzeit
Verstöße gegen Hook-Regeln
Verwechslung von synchron und asynchron
Nächste Schritte
Strings