GitHub

La traduzione dei contenuti dinamici gestisce testo non disponibile al momento del build: contenuti generati dagli utenti, risposte API o record di database. Usa <Tx> per contenuti JSX e tx per stringhe semplici, entrambi solo lato server per motivi di sicurezza.

Usa con parsimonia: La traduzione dinamica consuma la quota API e aggiunge latenza. Preferisci i componenti <T> con componenti variabili quando possibile.

Quando usare la traduzione dinamica

La traduzione dinamica è pensata per i contenuti che non possono essere determinati in fase di build:

Casi d’uso appropriati

Contenuti generati dagli utenti: messaggi in chat, recensioni, post sui social
Risposte di API esterne: dati di terze parti, feed RSS, servizi esterni
Record di database: contenuti dinamici del CMS, profili utente da API
Dati in tempo reale: notifiche in tempo reale, messaggi di stato

Evita in questi casi

Nomi utente, numeri di conto → Usa <Var>
Messaggi condizionali → Usa i branch components
Validazione dei moduli → Usa la traduzione di stringhe
Configurazione statica → Usa le stringhe condivise

Guida rapida

Contenuti JSX con `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

Stringhe semplici con `tx`

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

Solo lato server

Sia <Tx> sia tx sono esclusivamente lato server per motivi di sicurezza:

// ✅ Server Component
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Client Component - non funziona
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Errore!
  return <div>{translated}</div>;
}

Esempi

Contenuti generati dagli utenti

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

Dati da API esterne

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

Contenuto misto

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Contenuto statico con variabili */}
      <T>
        <p><Var>{review.author}</Var> ha dato <Var>{review.rating}</Var> stelle</p>
      </T>
      
      {/* Contenuto dinamico dell'utente */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

Problemi comuni

Evita l’uso eccessivo

Non usare la traduzione dinamica per contenuti che possono essere resi con componenti standard:

// ❌ Non necessario
const content = `Ciao, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Usa invece i componenti variabili
return (
  <T>
    <p>Ciao, <Var>{userName}</Var>!</p>
  </T>
);

Impatto sulla quota API

La traduzione dinamica consuma la quota API a ogni richiesta. Usa la cache e una gestione degli errori appropriata nelle applicazioni in produzione.

Prossimi passi

Guida alla traduzione locale - Gestire le traduzioni senza chiamate API
Guida al middleware - Rilevamento della lingua e routing
Riferimenti API:
- Componente <Tx>

Usa con parsimonia: La traduzione dinamica consuma la quota API e aggiunge latenza. Preferisci i componenti <T> con componenti variabili quando possibile.

Quando usare la traduzione dinamica

La traduzione dinamica è pensata per i contenuti che non possono essere determinati in fase di build:

Casi d’uso appropriati

Contenuti generati dagli utenti: messaggi in chat, recensioni, post sui social
Risposte di API esterne: dati di terze parti, feed RSS, servizi esterni
Record di database: contenuti dinamici del CMS, profili utente da API
Dati in tempo reale: notifiche in tempo reale, messaggi di stato

Evita in questi casi

Nomi utente, numeri di conto → Usa <Var>
Messaggi condizionali → Usa i branch components
Validazione dei moduli → Usa la traduzione di stringhe
Configurazione statica → Usa le stringhe condivise

Guida rapida

Contenuti JSX con `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

Stringhe semplici con `tx`

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

Solo lato server

Sia <Tx> sia tx sono esclusivamente lato server per motivi di sicurezza:

// ✅ Server Component
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Client Component - non funziona
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Errore!
  return <div>{translated}</div>;
}

Esempi

Contenuti generati dagli utenti

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

Dati da API esterne

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

Contenuto misto

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Contenuto statico con variabili */}
      <T>
        <p><Var>{review.author}</Var> ha dato <Var>{review.rating}</Var> stelle</p>
      </T>
      
      {/* Contenuto dinamico dell'utente */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

Problemi comuni

Evita l’uso eccessivo

Non usare la traduzione dinamica per contenuti che possono essere resi con componenti standard:

// ❌ Non necessario
const content = `Ciao, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Usa invece i componenti variabili
return (
  <T>
    <p>Ciao, <Var>{userName}</Var>!</p>
  </T>
);

Impatto sulla quota API

La traduzione dinamica consuma la quota API a ogni richiesta. Usa la cache e una gestione degli errori appropriata nelle applicazioni in produzione.

Prossimi passi

Guida alla traduzione locale - Gestire le traduzioni senza chiamate API
Guida al middleware - Rilevamento della lingua e routing
Riferimenti API:
- Componente <Tx>

Usa con parsimonia: La traduzione dinamica consuma la quota API e aggiunge latenza. Preferisci i componenti <T> con componenti variabili quando possibile.

Quando usare la traduzione dinamica

La traduzione dinamica è pensata per i contenuti che non possono essere determinati in fase di build:

Casi d’uso appropriati

Contenuti generati dagli utenti: messaggi in chat, recensioni, post sui social
Risposte di API esterne: dati di terze parti, feed RSS, servizi esterni
Record di database: contenuti dinamici del CMS, profili utente da API
Dati in tempo reale: notifiche in tempo reale, messaggi di stato

Evita in questi casi

Nomi utente, numeri di conto → Usa <Var>
Messaggi condizionali → Usa i branch components
Validazione dei moduli → Usa la traduzione di stringhe
Configurazione statica → Usa le stringhe condivise

Guida rapida

Contenuti JSX con `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

Stringhe semplici con `tx`

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

Solo lato server

Sia <Tx> sia tx sono esclusivamente lato server per motivi di sicurezza:

// ✅ Server Component
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ Client Component - non funziona
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Errore!
  return <div>{translated}</div>;
}

Esempi

Contenuti generati dagli utenti

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

Dati da API esterne

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

Contenuto misto

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* Contenuto statico con variabili */}
      <T>
        <p><Var>{review.author}</Var> ha dato <Var>{review.rating}</Var> stelle</p>
      </T>
      
      {/* Contenuto dinamico dell'utente */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

Problemi comuni

Evita l’uso eccessivo

Non usare la traduzione dinamica per contenuti che possono essere resi con componenti standard:

// ❌ Non necessario
const content = `Ciao, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ Usa invece i componenti variabili
return (
  <T>
    <p>Ciao, <Var>{userName}</Var>!</p>
  </T>
);

Impatto sulla quota API

La traduzione dinamica consuma la quota API a ogni richiesta. Usa la cache e una gestione degli errori appropriata nelle applicazioni in produzione.

Prossimi passi

Guida alla traduzione locale - Gestire le traduzioni senza chiamate API
Guida al middleware - Rilevamento della lingua e routing
Riferimenti API:
- Componente <Tx>

Contenuti dinamici

In questa pagina

Contenuti dinamici

In questa pagina

Contenuti dinamici

In questa pagina

GitHubMetti una stella su GitHub

GitHubMetti una stella su GitHub

Metti una stella su GitHub

Metti una stella su GitHub