# gt-next: General Translation Next.js SDK: Contenu dynamique
URL: https://generaltranslation.com/fr/docs/next/guides/dynamic-content.mdx
---
title: Contenu dynamique
description: Comment traduire du contenu à l’exécution à l’aide des API de traduction côté serveur
---

La traduction de contenu dynamique prend en charge le texte qui n’est pas disponible au moment du build — contenu généré par les utilisateurs, réponses d’API ou enregistrements de base de données. Utilisez [`<Tx>`](/docs/next/api/components/tx) pour le contenu JSX et [`tx`](/docs/next/api/strings/tx) pour les chaînes de caractères simples, uniquement côté serveur dans les deux cas pour des raisons de sécurité.

<Callout type="warn">
  **À utiliser avec parcimonie :** La traduction dynamique consomme du quota d’API et ajoute de la latence. Préférez les [composants `<T>`](/docs/next/guides/t) avec des [composants variables](/docs/next/guides/variables) chaque fois que possible.
</Callout>

## Quand utiliser la traduction dynamique

La traduction dynamique s’applique aux contenus qui ne peuvent réellement pas être connus au moment du build :

### Cas d’usage appropriés

* **Contenu généré par les utilisateurs** : messages de chat, avis, publications sur les réseaux sociaux
* **Réponses d’API externes** : données tierces, flux RSS, services externes
* **Enregistrements en base de données** : contenu CMS dynamique, profils d’utilisateurs issus d’API
* **Données en temps réel** : notifications en direct, messages d’état

### À éviter dans les cas suivants

* Noms d’utilisateur, numéros de compte → Utilisez [`<Var>`](/docs/next/api/components/var)
* Messages conditionnels → Utilisez les [composants branch](/docs/next/guides/branches)
* Validation de formulaire → Utilisez la [traduction de chaînes de caractères](/docs/next/guides/strings)
* Configuration statique → Utilisez les [chaînes partagées](/docs/next/guides/shared-strings)

## Prise en main rapide

### Contenu JSX avec Tx

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

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


### Chaînes de caractères simples avec tx

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

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


## Côté serveur uniquement

[`<Tx>`](/docs/next/api/components/tx) et [`tx`](/docs/next/api/strings/tx) sont disponibles uniquement côté serveur pour des raisons de sécurité :

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

// ❌ Composant client - ne fonctionnera pas
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // Erreur !
  return <div>{translated}</div>;
}
```


## Exemples

### Contenu généré par les utilisateurs

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


### Données d’API externes

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


### Contenu mixte

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

async function ProductReview({ review }) {
  return (
    <div>
      {/* Contenu statique avec variables */}
      <T>
        <p><Var>{review.author}</Var> rated this <Var>{review.rating}</Var> stars</p>
      </T>
      
      {/* Contenu utilisateur dynamique */}
      <Tx>{review.content}</Tx>
    </div>
  );
}
```


## Utilisation dans les routes d’API

[`tx`](/docs/next/api/strings/tx) fonctionne dans les gestionnaires de routes d’API Next.js, pas seulement dans les composants serveur :

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

C’est utile lorsque vous devez exposer la traduction via un point de terminaison d’API — par exemple, pour alimenter des composants client ou des services externes.


## Approche de traduction côté client

Comme [`tx`](/docs/next/api/strings/tx) est disponible uniquement côté serveur, les composants client peuvent traduire du contenu dynamique via une route d’API servant de 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;
}
```

Cela, associé à la [route d’API ci-dessus](#api-route-usage), permet aux composants client d’accéder à la traduction dynamique.


## Traduction de plusieurs éléments

Utilisez `Promise.all` pour traduire des tableaux de contenu en parallèle :

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

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

C’est utile pour traduire des listes d’enregistrements de base de données, des réponses d’API ou toute autre collection de chaînes de caractères dynamiques.


## Problèmes courants

### Évitez d’en abuser

N’utilisez pas la traduction dynamique pour du contenu pouvant être géré avec des composants standard :

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

// ✅ Utilisez plutôt des composants variables
return (
  <T>
    <p>Hello, <Var>{userName}</Var>!</p>
  </T>
);
```


### Impact sur le quota d’API

La traduction dynamique consomme du quota d’API à chaque requête. En production, utilisez la mise en cache et la gestion des erreurs.

## Étapes suivantes

<Callout>
  **Voyez-le en action :** Consultez l’[application d’exemple de contenu dynamique](https://github.com/gt-examples/dynamic-content-tx) pour voir une démo fonctionnelle de `tx()` et `<Tx>` — [aperçu en direct](https://dynamic-content-tx.generaltranslation.dev).
</Callout>

* [Guide de traduction locale](/docs/next/guides/local-tx) - Gérez les traductions sans appel à l’API
* [Guide du middleware](/docs/next/guides/middleware) - Détection de la langue et routage
* Références de l’API :
  * [Composant `<Tx>`](/docs/next/api/components/tx)