Il componente <T>
Come internazionalizzare i componenti JSX usando il componente <T>
Il componente <T> è lo strumento principale per internazionalizzare i contenuti JSX nella tua applicazione Next.js. Wrappa gli elementi JSX e li traduce automaticamente in base alla lingua/locale dell’utente.
Guida rapida
Trasforma qualsiasi contenuto JSX statico racchiudendolo con <T>:
import { T } from 'gt-next';
// Prima
function Greeting() {
return <p>Ciao, mondo!</p>;
}
// Dopo
function Greeting() {
return <T><p>Hello, world!</p></T>;
}Per i contenuti dinamici all’interno di <T>, utilizza i Componenti variabili e i Componenti con diramazioni.
Utilizzo di base
Il componente <T> accetta qualsiasi contenuto JSX come children:
// Simple text
<T>Benvenuto/a nella nostra app</T>
// HTML elements
<T><h1>Titolo pagina</h1></T>
// Complex nested JSX
<T>
<div className="alert">
<span>Importante:</span> leggilo con attenzione.
</div>
</T>Opzioni di configurazione
Aggiunta di contesto
Fornisci contesto di traduzione per i termini ambigui:
<T context="notification popup, not bread">
Clicca sulla notifica per chiuderla
</T>Impostazione degli ID di traduzione
Usa ID espliciti per ottenere traduzioni coerenti:
<T id="welcome-message">
Bentornato, utente!
</T>Quando utilizzare <T>
Utilizza <T> esclusivamente per contenuti statici:
// ✅ Il contenuto statico funziona
<T><button>Fai clic qui</button></T>
<T><h1>Benvenuto sul nostro sito</h1></T>
// ❌ Il contenuto dinamico non funziona
<T><p>Ciao {username}</p></T>
<T><p>Oggi è {new Date()}</p></T>
// ✅ Usa i componenti Variable per il contenuto dinamico
<T>
<p>Ciao <Var>{username}</Var></p>
</T>I componenti Variable e Branching sono progettati per essere utilizzati all'interno di <T> per contenuti dinamici. Consulta le guide Variable Components e Branching Components per ulteriori dettagli.
Esempi
Elementi semplici
// Basic text
<T>Ciao, mondo!</T>
// Button with text
<T><Button>Invia il modulo</Button></T>
// Heading with styling
<T><h1 className="text-2xl font-bold">Benvenuti</h1></T>Componenti complessi
// Menu di navigazione
<T>
<nav className="navbar">
<a href="/about">Chi siamo</a>
<a href="/contact">Contattaci</a>
</nav>
</T>
// Messaggio di avviso
<T>
<div className="alert alert-warning">
<AlertIcon className="w-5 h-5" />
<span>La sessione scadrà tra 5 minuti</span>
</div>
</T>Con le variabili
// Combinazione di testo statico con valori dinamici
<T>
<p>Bentornato, <Var>{user.name}</Var>!</p>
</T>
// Modulo con contenuto misto
<T>
<label>
Email: <input type="email" placeholder="Inserisci la tua email" />
</label>
</T>Scopri di più sul componente <Var> nella Guida ai componenti variabili.
Configurazione per la produzione
Processo di build
Aggiungi le traduzioni alla pipeline di build:
{
"scripts": {
"build": "npx gtx-cli translate && <...IL_TUO_COMANDO_DI_BUILD...>"
}
}Comportamento in sviluppo vs produzione
- Sviluppo: Con una chiave API di sviluppo, le traduzioni avvengono on‑demand quando i componenti vengono renderizzati. Vedrai le traduzioni in tempo reale mentre sviluppi.
- Produzione: Tutte le traduzioni vengono pre-generate durante la fase di build e saranno visibili quando l’applicazione sarà online.
Imposta la chiave API di sviluppo nelle variabili d’ambiente per abilitare la traduzione in tempo reale durante lo sviluppo. Puoi crearne una nella Dashboard, alla voce API Keys.
Considerazioni sulla privacy
Il contenuto nei componenti <T> viene inviato alle API di GT per la traduzione. Per i dati sensibili, usa i Variable Components per mantenere le informazioni private localmente:
// Sicuro - i dati sensibili restano locali
<T>
Bentornato, <Var>{username}</Var>
</T>Problemi comuni
Limiti dei componenti
<T> traduce solo i figli diretti, non il contenuto all’interno di altri componenti:
// ❌ Errato: il contenuto all'interno dei componenti non sarà tradotto
function MyComponent() {
return <p>Questo non sarà tradotto</p>;
}
<T>
<h1>Questo sarà tradotto</h1>
<MyComponent /> {/* Il contenuto all'interno non sarà tradotto */}
</T>
// ✅ Corretto: avvolgi ciascun componente singolarmente
function MyComponent() {
return <T><p>Questo sarà tradotto</p></T>;
}
<T><h1>Questo sarà tradotto</h1></T>
<MyComponent />Annidamento dei componenti <T>
// ❌ Non annidare i componenti <T>
<T>
<T>Ciao, mondo</T> {/* Non farlo */}
</T>Errori nei contenuti dinamici
La CLI restituirà un errore per i contenuti dinamici in <T>. Racchiudi i valori dinamici con i componenti Variable:
// ❌ Non corretto: il contenuto dinamico si rompe
<T><p>Ciao {username}</p></T>
// ✅ Corretto: usa i componenti Variable
<T><p>Ciao <Var>{username}</Var></p></T>Consulta la Guida ai componenti variabili per gestire i valori dinamici e la Guida ai componenti con diramazioni per i contenuti condizionali.
Prossimi passaggi
- Guida ai componenti variabili - Gestisci contenuti dinamici nelle traduzioni JSX
- Guida ai componenti ramificati - Aggiungi logica condizionale alle tue traduzioni
Come valuti questa guida?