Panoramica

La funzione msg contrassegna e codifica le stringhe per la traduzione.

const encodedString = msg('Ciao, mondo!');

La stringa codificata deve essere passata all’hook useMessages o alla funzione getMessages per ottenere le traduzioni.

Decodifica

Per ottenere di nuovo la stringa originale, decodificala con decodeMsg

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

Riferimenti

Parametri

Restituisce

Una stringa codificata in cui le variabili interpolate (se presenti) sono sostituite con i rispettivi valori.

Comportamento

Produzione

Durante il processo di CD, qualsiasi contenuto all'interno di una funzione msg viene tradotto prima che l'applicazione venga distribuita. Questo garantisce tempi di caricamento rapidi per tutte le lingue/localizzazioni, ma può tradurre solo il contenuto noto in fase di build.

Una volta generate, le traduzioni vengono (1) archiviate nella CDN oppure (2) incluse nell'output di build della tua app, in base alla configurazione. Da lì, il contenuto tradotto viene servito agli utenti. Se una traduzione non è disponibile, verrà utilizzato il contenuto originale come fallback.

Assicurati di seguire la guida alla distribuzione.

Sviluppo

Durante lo sviluppo, la funzione msg traduce i contenuti on demand. Questo è utile per prototipare l’aspetto della tua app in lingue diverse. Ricorda di aggiungere una Dev API key al tuo ambiente per abilitare questo comportamento.

In fase di sviluppo noterai un ritardo durante le traduzioni on demand. Questo non accadrà nelle build di produzione a meno che i contenuti non vengano esplicitamente tradotti on demand, ovvero utilizzando tx o <Tx>.

Esempio

Uso di base

Puoi usare msg per contrassegnare le stringhe da tradurre.

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

const encodedString = msg('Ciao, mondo!');

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

Nota: "Hello, world!" verrà tradotto nella lingua preferita dell'utente.

Uso delle variabili

Puoi passare variabili alle traduzioni del dizionario.

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

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

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

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

Nota: "Alice" non verrà tradotta nella lingua preferita dell'utente perché è una variabile.

Uso del formato di messaggi ICU

gt-next supporta il formato di messaggi ICU, che consente anche di formattare le variabili.

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

const encodedString = msg('Ci sono {count, plural, =0 {nessun articolo} =1 {un articolo} other {{count} articoli}} nel carrello', { count: 10 });

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

Note

• La funzione msg serve a contrassegnare le stringhe da tradurre.
• Le traduzioni con msg vengono risolte prima dell’esecuzione, durante il processo di build (tranne in sviluppo).

Prossimi passaggi

• Consulta useMessages per tradurre le stringhe.
• Consulta getMessages per tradurre le stringhe nei componenti server-side asincroni.