Ü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ückgabewert

Eine Callback-Funktion m, die den angegebenen kodierten Inhalt aus msg übersetzt.

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

Verhalten

Produktion

Während des CD-Prozesses wird jeglicher Inhalt innerhalb einer msg‑Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Das gewährleistet schnelle Ladezeiten für alle Locales, kann aber 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 aus wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, wird auf den ursprünglichen Inhalt als Standardwert zurückgegriffen.

Befolgen Sie dafür die Bereitstellungsanleitung hier.

Entwicklung

Während der Entwicklung übersetzt die Funktion m Inhalte bei Bedarf. Das ist hilfreich, um zu prototypen, wie deine App in verschiedenen Sprachen aussehen wird. Denke daran, deiner Umgebung einen Dev API key hinzuzufügen, um dieses Verhalten zu aktivieren.

Bei bedarfsorientierter Übersetzung in der Entwicklung kommt es zu einer Verzögerung. Dies tritt bei Produktions-Builds nicht auf, es sei denn, Inhalte werden explizit bei Bedarf übersetzt, d. h. mit tx oder <Tx>.

Beispiel

Grundlegende Verwendung

Sie können useMessages verwenden, um kodierte Strings aus msg 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 Nutzers übersetzt.

Variablen verwenden

Sie können Variablen in kodierten Zeichenfolgen ü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 Renderzeit überschrieben.

Verwendung des ICU‑Message‑Formats

gt-next unterstützt das ICU‑Message‑Format, mit dem Sie auch Variablen 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 die Direktive „use client“ verwenden, 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 codierte Zeichenketten aus msg übersetzt.
• Die Übersetzung von Zeichenketten mit useMessages erfolgt vor der Laufzeit, während des Build-Prozesses (außer in der Entwicklung).

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>.