# General Translation React SDKs (gt-react, gt-next): Composants serveur URL: https://generaltranslation.com/fr/docs/react/nextjs/server-components.mdx --- title: Composants serveur description: Traduisez du contenu dans les React Server Components avec General Translation et comprenez comment gt-next se comporte dans les composants serveur par rapport aux composants client. --- Dans l’App Router de Next.js, `gt-next` fonctionne à la fois dans les React Server Components (RSC) et dans les composants client. Le même composant [``](/docs/react/reference/components/t) et les mêmes hooks de traduction sont importés depuis `gt-next` dans les deux cas, et la bibliothèque choisit l’implémentation adaptée à l’environnement. Les fonctions asynchrones de l’App Router se trouvent dans le point d’entrée `gt-next/server`, qui n’est pas compatible avec le Pages Router. Lisez cette page pour comprendre où s’exécute la traduction et quels imports sont disponibles dans chaque type de composant. Pour les pages d’API serveur individuelles, commencez par [`getGT`](/docs/react/nextjs/reference/functions/get-gt). ## Imports côté serveur et client [#imports] Le point d’entrée principal `gt-next` résout vers une implémentation différente selon l’endroit où vous l’importez : * Dans un **composant serveur synchrone**, `` et [``](/docs/react/reference/components/gt-provider) sont des implémentations serveur qui chargent les traductions côté serveur. Les hooks comme [`useGT`](/docs/react/reference/hooks/use-gt), [`useTranslations`](/docs/react/reference/hooks/use-translations), [`useMessages`](/docs/react/reference/hooks/use-messages) et [`useLocale`](/docs/react/reference/hooks/use-locale) fonctionnent sans directive `'use client'`. * Dans un **composant serveur asynchrone**, utilisez la fonction asynchrone correspondante depuis [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt), comme `getGT`, `getTranslations`, `getMessages` ou `getLocale`. * Dans un **composant client** (un fichier avec `'use client'`), ces mêmes imports résolvent vers les implémentations partagées de `gt-react`. Comme le chemin d’import est identique, vous n’avez généralement pas à vous demander laquelle vous obtenez. Encapsulez le JSX dans `` et il est traduit sur place, que le composant soit rendu sur le serveur ou côté client. ```tsx title="app/page.tsx" import { T } from 'gt-next'; export default function Page() { return (

Welcome

This content is translated automatically.

); } ``` *Remarque : les fonctions réservées au serveur telles que [`getGT`](/docs/react/nextjs/reference/functions/get-gt), [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) et [`tx`](/docs/react/nextjs/reference/functions/tx) ne peuvent pas être importées dans un composant client. Les importer depuis un fichier `'use client'` déclenche une erreur.* ## Le provider dans Next.js [#provider] Dans l’App Router de Next.js, `` est un composant serveur. Placez-le dans votre layout racine : il charge les traductions sur le serveur, puis les transmet à vos composants client. Vous ne transmettez **pas** les props `locale` ou `translations` — le serveur les détermine à partir de la requête. ```tsx title="app/layout.tsx" import { GTProvider, useLocale } from 'gt-next'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { const locale = useLocale(); return ( {children} ); } ``` Le Pages Router de Next.js fonctionne différemment : transmettez `locale` et `translations` à `` via les props de la page. Consultez le [guide de démarrage rapide du Pages Router de Next.js](/docs/react/nextjs-pages-router-quickstart). ## Traduire des chaînes [#strings] Pour les chaînes isolées — placeholders, valeurs `aria-label`, texte alternatif — vous avez besoin d’une fonction de traduction plutôt que du composant `` : * **Dans un composant synchrone**, appelez le hook `useGT` de `gt-next`. Il fonctionne aussi bien dans les composants serveur que client. * **Dans un composant App Router asynchrone**, utilisez `await getGT` depuis [`gt-next/server`](/docs/react/nextjs/reference/functions/get-gt). ```tsx title="app/page.tsx" import { getGT } from 'gt-next/server'; export default async function Page() { const gt = await getGT(); return

{gt('Hello, world!')}

; } ``` `getGT` et `useGT` traduisent le contenu connu au build. Pour le contenu connu uniquement au moment de la requête, utilisez plutôt la traduction à l’exécution. ## Traduction à l’exécution [#runtime] Les composants serveur peuvent aussi traduire à la demande au moment de la requête avec le [composant ``](/docs/react/nextjs/reference/components/tx) et la [fonction `tx`](/docs/react/nextjs/reference/functions/tx) de `gt-next/server`. Utilisez-les uniquement lorsque le contenu n’est pas connu à l’avance — ils traduisent via l’API de General Translation sur le serveur pendant le traitement de la requête, et sont donc plus lents que la traduction à la compilation. La traduction à l’exécution est uniquement disponible côté serveur ; elle n’est pas disponible dans les composants client. ## Fonctionnement de la traduction [#how-it-runs] `gt-next` se comporte différemment en production et en développement, en fonction de `NODE_ENV` : * **Production.** Les traductions générées à la compilation sont chargées par défaut depuis le CDN de General Translation, ou depuis votre bundle local si vous configurez les [traductions locales](/docs/react/nextjs/config#translations). La traduction à la demande avec `` et `tx` fonctionne toujours dans les composants serveur. * **Développement.** Avec une clé API de développement, le contenu affiché dans un paramètre régional autre que le paramètre régional par défaut est traduit à la demande via l’API de General Translation et mis en cache en mémoire, afin que vous puissiez prévisualiser d’autres paramètres régionaux pendant vos modifications. Ce délai n’existe pas en production. *Remarque : une clé API de production (préfixée par `gtx-api-`) fait que `gt-next` se comporte comme en production, même en développement local, ce qui désactive le rechargement à chaud à la demande.*