BlogDashboard

Strings

So internationalisieren Sie einfache Textstrings mit useGT und getGT

Die String-Übersetzung bietet 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-Adresse eingeben')}
      title={t('Feld für E-Mail-Adresse')}
    />
  );
}

Asynchrone Komponenten

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

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

Wann String-Übersetzung verwenden?

Die String-Übersetzung ist ideal, wenn Sie einfachen Text statt JSX benötigen:

HTML-Attribute

const t = useGT();

<input 
  placeholder={t('Produkte suchen...')}
  aria-label={t('Eingabefeld für die Produktsuche')}
  title={t('Zum Durchsuchen unseres Katalogs eingeben')}
/>

Objekteigenschaften

const t = useGT();

const user = {
  name: 'John',
  role: 'admin',
  bio: t('Erfahrener Softwareentwickler mit 5 Jahren Erfahrung mit React'),
  status: t('Aktuell 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

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

// ✅ Verwenden Sie <T> für JSX-Inhalte
<T><p>Willkommen in <strong>unserem Store</strong>!</p></T>

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

Verwendung von Variablen

Basisvariablen

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‑Nachrichtenformat

Für erweitertes Formatieren die ICU‑Syntax verwenden:

const t = useGT();
translate('Im Warenkorb {count, plural, =0 {befinden sich keine Artikel} =1 {befindet sich ein Artikel} other {befinden sich {count} Artikel}}', { count: 10 });

Weitere Informationen zum ICU Message Format finden Sie 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 über Ihr 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 im Rückstand - Versand in 2–3 Wochen'),  
      discontinued: t('Dieser Artikel wurde eingestellt')
    },
    errors: {
      notFound: t('Produkt nicht gefunden'),
      outOfStock: t('Leider ist dieser Artikel derzeit nicht auf Lager')
    }
  };
}

// 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('Durchsuchen Sie unsere umfangreiche Auswahl an hochwertigen Produkten'),
    openGraph: {
      title: t('Unsere Produkte shoppen'),
      description: t('Entdecken Sie tolle Angebote für top-bewertete 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 können nicht übersetzt werden:

// ❌ Dynamische Inhalte funktionieren nicht
function MyComponent() {
  const [userMessage, setUserMessage] = useState('');
  const t = useGT();
  
  return <p>{t(userMessage)}</p>; // Das schlägt fehl
}

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

Verstöße gegen Hook-Regeln

Befolgen Sie die React-Hook-Regeln bei der Verwendung von useGT:

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

// ✅ Hooks immer auf oberster 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 einer asynchronen Komponente
export default async function AsyncComponent() {
  const t = useGT(); // Das funktioniert nicht
  return <p>{t('Hello')}</p>;
}

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

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

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

Nächste Schritte

Wie ist diese Anleitung?

Verzweigungskomponenten

Verwendung von Verzweigungskomponenten für bedingte Inhalte in Übersetzungen

Geteilte Strings

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

Auf dieser Seite

Synchrone vs. asynchrone Verwendung
Schnellstart
Synchrone Komponenten
Asynchrone Komponenten
Wann String-Übersetzung verwenden?
HTML-Attribute
Objekteigenschaften
Konfiguration & Konstanten
Wann Sie stattdessen <T> verwenden sollten
Verwendung von Variablen
Basisvariablen
Mehrere Variablen
ICU‑Nachrichtenformat
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