# General Translation React SDKs (gt-react, gt-next): Configurer TanStack Start URL: https://generaltranslation.com/fr/docs/react/tanstack-start/setup.mdx --- title: Configurer TanStack Start description: Initialisez General Translation dans une application TanStack Start, déterminez le paramètre régional et hydratez le provider depuis la route racine. --- `gt-tanstack-start` se configure entièrement dans la route racine. Vous appelez [`initializeGT`](/docs/node/reference/functions/initialize-gt) au niveau du module, déterminez le paramètre régional de la requête avec `parseLocale`, chargez un instantané des traductions dans le loader de la route, puis transmettez les deux à [``](/docs/react/reference/components/gt-provider). Comme TanStack Start effectue le rendu côté serveur, le provider a besoin du paramètre régional et des traductions dès le départ ; ce schéma permet donc de les hydrater à partir du loader. Cette page couvre la configuration spécifique à TanStack Start. Pour le parcours complet, y compris l'installation et la CLI, suivez le [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart). *Attention : `gt-tanstack-start` est expérimental et peut entraîner des modifications incompatibles.* ## Charger les traductions [#load-translations] Créez une fonction [`loadTranslations`](/docs/react/reference/functions/load-translations) qui importe le fichier de traduction du paramètre régional. Conservez les fichiers dans `src/` pour que Vite puisse les importer. ```ts title="loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./src/_gt/${locale}.json`); return translations.default; } ``` Le CLI génère ces fichiers lorsque vous exécutez `npx gt translate`. ## Initialiser et déterminer le paramètre régional [#initialize] `initializeGT`, `parseLocale` et [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) sont tous importés depuis `gt-tanstack-start` : * **`initializeGT`** — appelez-le une seule fois au niveau du module de la route racine. Étendez avec votre `gt.config.json` et passez `loadTranslations`. * **`parseLocale`** — lit le paramètre régional à partir du cookie de la requête et de l’en-tête `Accept-Language` sur le serveur, puis à partir du cookie dans le navigateur. Il enregistre ensuite le paramètre régional résolu dans le cookie. * **`getTranslationsSnapshot`** — charge les traductions d’un paramètre régional dans le format attendu par ``, afin que le contenu s’affiche sans flash au chargement. Consultez la [référence](/docs/react/reference/functions/get-translations-snapshot). ## Configurez la route racine [#root-route] Dans `src/routes/__root.tsx`, initialisez au niveau du module, déterminez le paramètre régional et chargez l’instantané dans le loader, puis transmettez `locale` et `translations` à `` dans le composant shell. ```tsx title="src/routes/__root.tsx" import { HeadContent, Scripts, createRootRoute, } from '@tanstack/react-router'; import { initializeGT, GTProvider, parseLocale, getTranslationsSnapshot, LocaleSelector, } from 'gt-tanstack-start'; import gtConfig from '../../gt.config.json'; import loadTranslations from '../../loadTranslations'; // Initialiser General Translation une seule fois, au niveau du module initializeGT({ ...gtConfig, loadTranslations }); export const Route = createRootRoute({ loader: async () => { const locale = parseLocale(); return { locale, translations: await getTranslationsSnapshot(locale), }; }, shellComponent: RootDocument, }); function RootDocument({ children }: { children: React.ReactNode }) { const { locale, translations } = Route.useLoaderData(); return ( {children} ); } ``` `` nécessite ici à la fois `locale` et `translations` — contrairement à Next.js, où le serveur s’en charge, ou à React Native, où le provider les charge lui-même. ## Marquer le contenu à traduire [#content] Dans vos composants de route, encapsulez le JSX dans [``](/docs/react/reference/components/t) et traduisez les chaînes avec [`useGT`](/docs/react/reference/hooks/use-gt). Importez-les depuis `gt-react` pour que le CLI les détecte lors de l’analyse du code source. ```tsx title="src/routes/index.tsx" import { createFileRoute } from '@tanstack/react-router'; import { T, useGT } from 'gt-react'; export const Route = createFileRoute('/')({ component: Home }); function Home() { const gt = useGT(); return (

Welcome to my app

This content is translated automatically.

); } ```