Panoramica

La funzione useGT è un hook per tradurre le stringhe in fase di build.

const t = useGT();

<p>{  t('Questo testo verrà tradotto')  }</p>;

Riferimenti

Parametri

Nessuno

Restituisce

Una funzione di callback, t, che traduce il contenuto fornito.

(content: string, options?: InlineTranslationOptions) => string

Comportamento

Produzione

Durante il processo di CD, qualsiasi contenuto all'interno di una funzione t viene tradotto prima della distribuzione dell'applicazione. Questo garantisce tempi di caricamento rapidi per tutte le lingue/locali, ma può tradurre solo il contenuto noto in fase di build.

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

Assicurati di seguire la guida al deployment.

Sviluppo

Durante lo sviluppo, la funzione t traduce i contenuti su richiesta. Questo è utile per creare prototipi e vedere come apparirà la tua app in lingue diverse. Ricorda di aggiungere una Dev API key al tuo ambiente per abilitare questo comportamento.

Durante la traduzione su richiesta in ambiente di sviluppo potresti riscontrare un ritardo. Questo non avverrà nelle build di produzione, a meno che i contenuti non vengano tradotti esplicitamente su richiesta, ad esempio usando tx o <Tx>.

Esempio

Utilizzo di base

Puoi usare useGT per tradurre le stringhe.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Ciao, Alice!')}
    </p>
  );
}

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

Utilizzo delle variabili

Puoi passare variabili alle traduzioni del dizionario.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Ciao, {name}!', { name: 'Alice'  })}
    </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 { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('Ci sono {count, plural, =0 {nessun articolo} =1 {un articolo} other {{count} articoli}} nel carrello', { count: 10 })}
    </p>
  );
}

Importare da gt-next/client

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

"use client";
import { useGT } from 'gt-next/client';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Ciao, Alice!')}
    </p>
  );
}

Note

• La funzione useGT è un hook che traduce le stringhe.
• Le stringhe tradotte con useGT vengono elaborate prima dell'esecuzione, durante il processo di build (tranne in sviluppo).

Prossimi passi

• Consulta getGT per tradurre asincronamente le stringhe in fase di build.
• Per le traduzioni in runtime, consulta tx e <Tx>.