Übersicht

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

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

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

Decodierung

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

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

Referenz

Parameter

Rückgabewert

Eine encoded string, wobei interpolierte variables (falls vorhanden) durch ihre value ersetzt werden.

Verhalten

Produktion

Während des CD-Prozesses wird sämtlicher Inhalt innerhalb einer msg-Funktion übersetzt, bevor Ihre Anwendung bereitgestellt wird. Das gewährleistet 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 Network) oder (2) im Build-Output Ihrer App gespeichert. Von dort aus wird der übersetzte Inhalt an Ihre Nutzer ausgeliefert. Wenn keine Übersetzung gefunden wird, wird als Standardwert auf den originalen 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 nützlich, um zu prototypen, wie deine App in verschiedenen Sprachen aussehen wird. Denk daran, einen Dev API key in deiner Umgebung zu hinterlegen, um dieses Verhalten zu aktivieren.

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

Beispiel

Grundlegende Verwendung

Mit msg können Sie Zeichenfolgen für die Übersetzung 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 des Nutzers übersetzt, da es sich um eine Variable handelt.

Verwendung des ICU‑Nachrichtenformats

gt-next unterstützt das ICU‑Nachrichtenformat, mit dem Sie auch Variablen formatieren können.

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

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

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

Hinweise

• Die Funktion msg markiert Zeichenketten für die Übersetzung.
• Übersetzungen von mit msg markierten Zeichenketten erfolgen vor der Laufzeit, während des Build-Prozesses (außer in der Entwicklung).

Nächste Schritte

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