Überblick

Die Funktion useMessages ist ein Hook zum Übersetzen von encoded strings aus msg zur Build-Zeit.

const m = useMessages();

<p>{  m(encodedString)  }</p>;

Referenzen

Parameter

Keine

Rückgabe

Eine Callback-Funktion „m“, die den bereitgestellten codierten Inhalt aus „msg“ übersetzt.

(encodedContent: string, options?: Record<string, any>) => string

Verhalten

Produktion

Während des CD-Prozesses (Continuous Delivery/Deployment) wird sämtlicher Inhalt innerhalb einer msg-Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Das gewährleistet kurze Ladezeiten für alle locales, kann jedoch nur Inhalte übersetzen, die zur Build-Zeit bekannt sind.

Nach der Generierung werden Übersetzungen je nach Konfiguration entweder (1) im CDN (Content Delivery Network) gespeichert oder (2) im Build-Output Ihrer App. Von dort wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, wird auf den ursprünglichen Inhalt als Standardwert zurückgegriffen.

Folgen Sie der Deployment-Anleitung hier.

Entwicklung

Während der Entwicklung übersetzt die Funktion m Inhalte bei Bedarf. Das ist hilfreich, um zu prototypen, wie Ihre App in verschiedenen Sprachen aussehen wird. Denken Sie daran, Ihrer Umgebung einen Dev-API-Schlüssel hinzuzufügen, um dieses Verhalten zu aktivieren.

Bei On-Demand-Übersetzungen in der Entwicklung kann es zu einer Verzögerung kommen. Dies tritt in Produktions-Builds nicht auf, es sei denn, Inhalte werden ausdrücklich bei Bedarf übersetzt, d. h. mit tx oder <Tx>.

Beispiel

Grundlegende Verwendung

Sie können useMessages verwenden, um von msg erzeugte encoded strings zu übersetzen.

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Hallo, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

Hinweis: "Alice" wird in die bevorzugte Sprache des Benutzers übersetzt.

Verwendung von variables

Sie können variables in encoded strings überschreiben.

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Hallo, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

Hinweis: Dadurch wird „Hello, Bob!“ angezeigt – die Variable wird zur Laufzeit beim Rendern überschrieben.

Verwendung des ICU Message Format

gt-next unterstützt das ICU Message Format, mit dem Sie auch Ihre variables formatieren können.

import { msg, useMessages } from 'gt-next';

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

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

Importieren aus gt-next/client

Wenn Sie unter der Direktive "use client" arbeiten, sollten Sie aus gt-next/client statt aus gt-next importieren.

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('Hallo, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

Hinweise

• Die Funktion useMessages ist ein Hook, der von msg erzeugte encoded strings übersetzt.
• Übersetzungen von Strings mit useMessages erfolgen nicht zur Laufzeit, sondern bereits beim Build-Prozess (außer im Development).

Nächste Schritte

• Siehe getMessages für asynchrone Übersetzungen aus encoded strings zur Build‑Zeit.
• Siehe msg zum Encodieren von Strings für die Übersetzung.
• Für Übersetzungen zur Laufzeit siehe tx und <Tx>.