# gt-next: General Translation Next.js SDK: Contenuto dinamico
URL: https://generaltranslation.com/it/docs/next/guides/dynamic-content.mdx
---
title: Contenuto dinamico
description: Come tradurre contenuti a runtime usando API di traduzione lato server
---

La traduzione dei contenuti dinamici riguarda il testo che non è disponibile in fase di build: contenuti generati dagli utenti, risposte API o record del database. Usa [`<Tx>`](/docs/next/api/components/tx) per i contenuti JSX e [`tx`](/docs/next/api/strings/tx) per le stringhe semplici, entrambi solo lato server per motivi di sicurezza.

<Callout type="warn">
  **Usa con parsimonia:** La traduzione dinamica consuma la quota API e aggiunge latenza. Quando possibile, preferisci i [componenti `<T>`](/docs/next/guides/t) con i [componenti variabili](/docs/next/guides/variables).
</Callout>

## Quando usare la traduzione dinamica

La traduzione dinamica è pensata per contenuti che davvero non possono essere noti nella fase di build:

### Casi d’uso appropriati

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

### Da evitare in questi casi

* Nomi utente, numeri di account → Usa [`<Var>`](/docs/next/api/components/var)
* Messaggi condizionali → Usa [componenti branch](/docs/next/guides/branches)
* Validazione dei form → Usa [traduzione delle stringhe](/docs/next/guides/strings)
* Configurazione statica → Usa [stringhe condivise](/docs/next/guides/shared-strings)

## Guida rapida

### Contenuti JSX con Tx

```jsx
import { Tx } from 'gt-next';

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


### Stringhe semplici con tx

```jsx
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>`](/docs/next/api/components/tx) sia [`tx`](/docs/next/api/strings/tx) sono utilizzabili solo lato server per motivi di sicurezza:

```jsx
// ✅ Componente server
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

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


## Esempi

### Contenuti generati dagli utenti

```jsx
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 API esterni

```jsx
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>
  );
}
```


### Contenuti misti

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

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


## Uso nelle route API

[`tx`](/docs/next/api/strings/tx) funziona negli handler delle route API di Next.js, non solo nei componenti server:

```tsx
// app/api/translate/route.ts
import { tx } from 'gt-next/server';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { text, locale } = await request.json();
  const translated = await tx(text, { locale });
  return NextResponse.json({ translated });
}
```

Questo è utile quando devi esporre la traduzione come endpoint API, ad esempio per servire componenti client o servizi esterni.


## Pattern di traduzione lato client

Poiché [`tx`](/docs/next/api/strings/tx) è disponibile solo lato server, i componenti client possono tradurre contenuti dinamici chiamando una route API che funge da proxy:

```tsx
'use client';

async function translateText(text: string) {
  const res = await fetch('/api/translate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text, locale: 'fr' }),
  });
  const { translated } = await res.json();
  return translated;
}
```

Si usa insieme alla [route API sopra](#api-route-usage) per dare ai componenti client accesso alla traduzione dinamica.


## Tradurre più elementi

Usa `Promise.all` per tradurre array di contenuti in parallelo:

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

const translatedPosts = await Promise.all(
  posts.map(async (post) => ({
    ...post,
    title: await tx(post.title),
  }))
);
```

È utile per tradurre elenchi di record del database, risposte API o qualsiasi raccolta di stringhe dinamiche.


## Problemi comuni

### Evita di abusarne

Non usare la traduzione dinamica per contenuti che possono utilizzare componenti standard:

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

// ✅ Usa i componenti variabili al posto
return (
  <T>
    <p>Hello, <Var>{userName}</Var>!</p>
  </T>
);
```


### Impatto sulla quota dell&#39;API

La traduzione dinamica consuma quota dell&#39;API a ogni richiesta. Usa la cache e la gestione degli errori nelle applicazioni in produzione.

## Passaggi successivi

<Callout>
  **Guardalo in azione:** Dai un&#39;occhiata all&#39;[app di esempio per i contenuti dinamici](https://github.com/gt-examples/dynamic-content-tx) per una demo funzionante di `tx()` e `<Tx>` — [anteprima live](https://dynamic-content-tx.generaltranslation.dev).
</Callout>

* [Guida alla traduzione locale](/docs/next/guides/local-tx) - Gestisci le traduzioni senza effettuare chiamate API
* [Guida al middleware](/docs/next/guides/middleware) - Rilevamento della lingua e instradamento
* Riferimenti API:
  * [Componente `<Tx>`](/docs/next/api/components/tx)