Panoramica

La funzione useMessages è un hook che traduce, in fase di build, le stringhe codificate da msg.

const m = useMessages();

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

Riferimenti

Parametri

Nessuno

Restituisce

Una funzione di callback, m, che traduce il contenuto codificato fornito in msg.

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

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/località, ma può tradurre solo contenuti noti al momento della build.

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

Assicurati di seguire la guida al deployment qui.

Sviluppo

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

Durante le traduzioni on demand in sviluppo potresti riscontrare un ritardo. Questo non avverrà nei build di produzione, a meno che i contenuti non vengano esplicitamente tradotti on demand, ovvero utilizzando tx o <Tx>.

Esempio

Utilizzo di base

Puoi usare useMessages per tradurre le stringhe codificate da msg.

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

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

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

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

Nota: "Alice" verrà tradotta nella lingua preferita dell’utente.

Utilizzo delle variabili

Puoi sostituire le variabili nelle stringhe codificate.

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

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

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

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

Nota: verrà visualizzato "Hello, Bob!": la variabile viene sostituita al momento del rendering.

Uso del formato di messaggi ICU

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

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

const encodedMessage = msg('Nel carrello {count, plural, =0 {non ci sono articoli} =1 {c’è un articolo} other {ci sono {count} articoli}}', { count: 10 });

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

Importare da gt-next/client

Se stai operando con la direttiva "use client", importa da gt-next/client invece che da gt-next.

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

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

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

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

Note

• La funzione useMessages è un hook che traduce le stringhe codificate da msg.
• Le traduzioni con useMessages avvengono prima dell'esecuzione, durante il processo di build (tranne che in sviluppo).

Prossimi passaggi

• Consulta getMessages per ottenere traduzioni asincrone di stringhe a partire da stringhe codificate in fase di build.
• Consulta msg per codificare le stringhe da tradurre.
• Per le traduzioni a runtime, consulta tx e <Tx>.