Panoramica

Questa guida è un tutorial passo per passo su come tradurre le stringhe nella tua app Next.js usando useGT, getGT e tx.

Prerequisiti

Supponiamo che tu abbia già installato gt-next nel tuo progetto e che abbia seguito o stia seguendo la Guida rapida.

Tradurre le stringhe

Componenti lato client

Per le stringhe lato client, usa useGT. Ricorda che useGT deve essere chiamato all’interno di un componente figlio di <GTProvider>.

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Questa è una stringa che viene tradotta')}</h1> // [!code highlight]
    </div>
  );
}

Componenti lato server

Per le stringhe lato server, usa getGT.

import { getGT } from 'gt-next/server';

export default async function Home() {
  const t = await getGT(); 
  return (
    <div>
      <h1>{t('Questa è una stringa tradotta')}</h1> // [!code highlight]
    </div>
  );
}

Aggiunta di variabili

Le variabili sono valori che possono cambiare, ma non vengono tradotti. Per aggiungere variabili alle stringhe, usa il seguente modello:

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT();
  return (
    <div>
      <h1>{t('Ciao {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}

Funziona sia con useGT sia con getGT.

Contenuto dinamico

Mettiamo che tu abbia una stringa che varia. Puoi usare la funzione tx per tradurre la stringa in runtime.

import { tx } from 'gt-next/server';

export default async function MyComponent({ username }) {
  const translation = await tx(`Ciao, ${username}. Com'è andata la giornata?`); 
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}

Note

• Per tradurre le stringhe, usa useGT, getGT e tx.
• useGT e getGT eseguono la traduzione prima del deploy, mentre tx traduce a runtime. Usa tx con parsimonia.
• Puoi aggiungere variabili alle stringhe usando il pattern { variables: { key: value } }.

Prossimi passaggi

• Torna alla Guida rapida per completare la configurazione del progetto per la traduzione.
• Consulta la documentazione API per useGT, getGT e tx.