# tanstack-start: Vue d’ensemble URL: https://generaltranslation.com/fr/docs/tanstack-start/introduction.mdx --- title: Vue d’ensemble description: Vue d’ensemble du SDK TanStack Start de General Translation --- ## Introduction `gt-tanstack-start` est une intégration open source d’internationalisation (i18n) pour les applications [TanStack Start](https://tanstack.com/start). Elle apporte au framework TanStack Start la même expérience développeur que [`gt-next`](/docs/next) — il suffit d’envelopper le contenu dans `` pour qu’il soit traduit —. Basée sur [`gt-react`](/docs/react), elle ajoute des fonctionnalités propres à TanStack Start, comme la détection isomorphe du paramètre régional et l’intégration au loader racine. **Expérimental :** `gt-tanstack-start` est en cours de développement actif. Les API peuvent changer d’une version mineure à l’autre. Son utilisation en production n’est pas encore recommandée. ## Comment ça marche Initialisez [`initializeGT()`](#initialization-with-initializegt) dans votre route racine Chargez les traductions dans le [loader racine](#root-loader) Encapsulez votre application dans [``](#the-gtprovider-component) Utilisez [``](#the-t-component) pour traduire le contenu ## Initialisation avec `initializeGT` La fonction `initializeGT()` configure le gestionnaire i18n. Appelez-la en haut du fichier de la route racine : ```tsx title="src/routes/__root.tsx" import { initializeGT } from 'gt-tanstack-start' import gtConfig from '../../gt.config.json' import loadTranslations from '../../loadTranslations' initializeGT({ ...gtConfig, loadTranslations, }) ``` ## Loader racine Utilisez `getTranslations()` et `getLocale()` dans le loader de votre route racine pour récupérer les traductions appropriées pour la requête en cours : ```tsx title="src/routes/__root.tsx" import { getTranslations, getLocale } from 'gt-tanstack-start' export const Route = createRootRoute({ loader: async () => { return { translations: await getTranslations(), locale: getLocale(), } }, // ... }) ``` ## Le composant `` Le composant `` fournit le contexte de traduction à tous les composants enfants. Transmettez les traductions et le paramètre régional depuis le loader : ```tsx title="src/routes/__root.tsx" import { GTProvider } from 'gt-tanstack-start' function RootDocument({ children }: { children: React.ReactNode }) { const { translations, locale } = Route.useLoaderData() return ( {children} ) } ``` ## Le composant `` Le composant [``](/docs/react/api/components/t) traduit le contenu JSX. Encapsulez-y n’importe quels éléments pour qu’ils s’affichent dans la langue de l’utilisateur : ```tsx import { T } from 'gt-react' function Welcome() { return (

Welcome to our app!

This content is automatically translated.

) } ``` Importez `` depuis `gt-react`, et non depuis `gt-tanstack-start`. Ainsi, la CLI `gt` peut détecter votre contenu à traduire lors de la génération des fichiers de traduction. ## Sélecteur de paramètre régional Ajoutez un `` pour permettre aux utilisateurs de passer d’une langue à l’autre : ```tsx import { LocaleSelector } from 'gt-tanstack-start' function Nav() { return ( ) } ``` *** ## Étapes suivantes * Configurez votre projet avec le [guide de démarrage rapide](/docs/tanstack-start) * Parcourez l’[application exemple](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic) * Découvrez les [composants variables](/docs/react/guides/variables) comme ``, `` et ``