Übersicht

Die Funktion msg markiert und kodiert Zeichenketten für die Übersetzung.

const encodedString = msg('Hallo, Welt!');

Die encoded string sollte an den useMessages-Hook oder die getMessages-Funktion übergeben werden, um Übersetzungen abzurufen.

Decodierung

Um die ursprüngliche Zeichenkette wiederherzustellen, müssen Sie sie mit decodeMsg decodieren

import { msg, decodeMsg } from 'gt-next';
const encodedString = msg('Hallo, Welt!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // „Hallo, Welt!“

Referenz

Parameter

Rückgabe

Eine encoded string, in der interpolierte variables (falls vorhanden) durch ihre Werte ersetzt wurden.

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 sorgt für schnelle 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/Distribution 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 als Standardwert auf den ursprünglichen Inhalt zurückgegriffen.

Achten Sie darauf, der Bereitstellungsanleitung hier zu folgen.

Entwicklung

Während der Entwicklung übersetzt die Funktion msg Inhalte bei Bedarf. Das ist hilfreich, um zu sehen, 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 bedarfsabhängigen Ü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, also z. B. mit tx oder <Tx>.

Beispiel

Grundlegende Verwendung

Sie können msg verwenden, um Zeichenketten für die Übersetzung zu markieren.

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

const encodedString = msg('Hallo, Welt!');

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

Hinweis: „Hello, world!“ wird in die bevorzugte Sprache des Nutzers übersetzt.

Verwendung von variables

Sie können variables an Wörterbuch-Übersetzungen übergeben.

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

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

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

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

Hinweis: „Alice“ wird nicht in die bevorzugte Sprache der Nutzerin oder des Nutzers übersetzt, da es sich um eine Variable handelt.

Verwendung des ICU Message Format

gt-next unterstützt das ICU Message Format, sodass Sie auch Ihre Variablen formatieren können.

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

const encodedString = 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(encodedString)}
    </p>
  );
}

Hinweise

• Die Funktion msg dient dazu, Zeichenketten für die Übersetzung zu markieren.
• Übersetzungen mit msg erfolgen nicht zur Laufzeit, sondern bereits während des Build-Prozesses (außer in der Entwicklung).

Nächste Schritte

• Siehe useMessages zum Übersetzen von Zeichenketten.
• Siehe getMessages zum Übersetzen von Zeichenketten in asynchronen serverseitigen Komponenten.