# tanstack-start: Quickstart TanStack Start
URL: https://generaltranslation.com/fr/docs/tanstack-start.mdx
---
title: Quickstart TanStack Start
description: Internationalisez votre application TanStack Start avec gt-tanstack-start
---
**Prérequis :** un projet TanStack Start avec React 16.8+
**Expérimental :** `gt-tanstack-start` est en cours de développement et n’est pas encore recommandé en production.
## Installation
Installez `gt-tanstack-start`, `gt-react` et la CLI `gt` :
```bash
npm i gt-tanstack-start gt-react
npm i -D gt
```
```bash
yarn add gt-tanstack-start gt-react
yarn add --dev gt
```
```bash
bun add gt-tanstack-start gt-react
bun add --dev gt
```
```bash
pnpm add gt-tanstack-start gt-react
pnpm add --save-dev gt
```
`gt-react` est requis en tant que dépendance directe pour que la CLI `gt` puisse détecter les composants `` dans votre code source.
## Configuration
### `gt.config.json`
Créez un `gt.config.json` dans la racine du projet :
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "ja"],
"files": {
"gt": {
"output": "src/_gt/[locale].json"
}
}
}
```
Les fichiers de traduction **doivent** se trouver dans `src/` pour que les imports dynamiques de Vite puissent fonctionner. `public/` ne fonctionnera pas.
### Chargeur de traductions
Créez un fichier `loadTranslations.ts` dans la racine du projet :
```ts title="loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`./src/_gt/${locale}.json`);
return translations.default;
}
```
### Configuration de la route root
Mettez à jour `src/routes/__root.tsx` pour initialiser GT et rendre les traductions disponibles :
```tsx title="src/routes/__root.tsx"
import {
HeadContent,
Scripts,
createRootRoute,
} from '@tanstack/react-router'
import {
initializeGT,
GTProvider,
getTranslations,
getLocale,
LocaleSelector,
} from 'gt-tanstack-start'
import gtConfig from '../../gt.config.json'
import loadTranslations from '../../loadTranslations'
// Initialiser GT au niveau du module
initializeGT({
...gtConfig,
loadTranslations,
})
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
],
}),
loader: async () => {
return {
translations: await getTranslations(),
locale: getLocale(),
}
},
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
const { translations, locale } = Route.useLoaderData()
return (
{children}
)
}
```
## Utilisation
Enveloppez le contenu dans `` pour le traduire. Importez `` depuis `gt-react` :
```tsx title="src/routes/index.tsx"
import { createFileRoute } from '@tanstack/react-router'
import { T } from 'gt-react'
export const Route = createFileRoute('/')({ component: Home })
function Home() {
return (
Bienvenue dans notre application !
Ce contenu est automatiquement traduit.
)
}
```
Importez `` depuis `gt-react` (et non depuis `gt-tanstack-start`). La CLI `gt` analyse les imports depuis `gt-react` pour repérer le contenu à traduire.
## Générer des traductions
### Utilisation de General Translation (recommandé)
Exécutez la commande `gt translate` pour générer les traductions :
```bash
npx gt translate
```
Cela envoie votre contenu à l’API de General Translation et télécharge les fichiers JSON traduits dans `src/_gt/`.
Vous aurez besoin de variables d’environnement pour l’API :
```bash title=".env"
GT_API_KEY="your-api-key"
GT_PROJECT_ID="your-project-id"
```
Obtenez vos clés API gratuites sur [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) ou exécutez :
```bash
npx gt auth
```
### Traductions manuelles
Si vous préférez gérer vous-même les traductions :
1. Générez les fichiers de la langue d’origine :
```bash
npx gt generate
```
2. Traduisez manuellement les fichiers JSON générés
3. Placez-les dans `src/_gt/{locale}.json`
## Tests
Démarrez le serveur de développement :
```bash
npm run dev
```
```bash
yarn dev
```
```bash
bun run dev
```
```bash
pnpm dev
```
Accédez à [localhost:3000](http://localhost:3000) et utilisez le sélecteur de paramètre régional pour passer d’une langue à l’autre. Les traductions sont chargées à partir de fichiers JSON locaux, le changement de langue est donc instantané.
## Deployment
Ajoutez l’étape de traduction à votre script de build :
```json title="package.json"
{
"scripts": {
"build": "npx gt translate && vite build"
}
}
```
## Exemple d’application
Consultez l’exemple complet et fonctionnel : [tanstack-start-basic](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic)
***
## Étapes suivantes
* Lisez la [vue d’ensemble](/docs/tanstack-start/introduction) pour approfondir l’API
* Découvrez les [composants variables](/docs/react/guides/variables) comme ``, `` et ``
* Consultez la [référence API du composant ``](/docs/react/api/components/t)