# gt: General Translation CLI tool: Utiliser l’injection JSX automatique
URL: https://generaltranslation.com/fr/docs/cli/guides/using-auto-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment encapsuler le texte JSX traduisible dans des composants General Translation au build grâce à l’injection JSX automatique.

L’injection JSX automatique permet au compilateur d’encapsuler le texte JSX traduisible dans des composants [`<T>`](/docs/react/reference/components/t) au build, pour que vous n’ayez pas à les ajouter manuellement.

L’injection JSX automatique est désactivée par défaut. Elle fonctionne dans les applications React monopage (SPA), les applications React rendues côté serveur et les builds webpack de Next.js.

## Activer l’injection JSX automatique [#enable]

Installez le compilateur :

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

Définissez `enableAutoJsxInjection` dans `files.gt.parsingFlags` de `gt.config.json`. Cela permet de garder l’extraction via le CLI et les transformations du compilateur synchronisées.

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "parsingFlags": {
        "enableAutoJsxInjection": true
      }
    }
  }
}
```

## Configurer le build [#configure-build]

L’option `gt.config.json` est prise en compte lorsque le compilateur de General Translation s’exécute.

### SPA React

Ajoutez `@generaltranslation/compiler` à votre configuration Vite, webpack, Rollup, Rspack ou esbuild. Consultez [Développer avec les traductions SPA](/docs/react/guides/developing-spa-translations#setup) pour des exemples d’adaptateurs.

### Applications React (hors SPA) [#react-apps]

Pour les applications React rendues côté serveur qui utilisent Vite, ajoutez le plugin de compilation à votre configuration Vite :

```ts title="vite.config.ts"
import react from '@vitejs/plugin-react';
import { vite as gtCompiler } from '@generaltranslation/compiler';
import { defineConfig } from 'vite';
import gtConfig from './gt.config.json';

export default defineConfig({
  plugins: [react(), gtCompiler(gtConfig)],
});
```

### Next.js

Configurez `gt-next` pour utiliser le compilateur webpack basé sur Babel :

```ts title="next.config.ts"
import { withGTConfig } from 'gt-next/config';

const nextConfig = {};

export default withGTConfig(nextConfig, {
  experimentalCompilerOptions: {
    type: 'babel',
    enableAutoJsxInjection: true,
  },
});
```

Lancez le serveur de développement ainsi que le build de production avec webpack :

```json title="package.json"
{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack"
  }
}
```

Next.js 16 utilise Turbopack par défaut. Turbopack désactive le compilateur Babel, signale que l’injection automatique sera ignorée et laisse le JSX non encapsulé. Consultez les [options du compilateur Next.js](/docs/react/nextjs/config#compiler-options).

## Fonctionnement [#how]

Sans injection, c’est à vous d’encapsuler le texte à traduire.

```jsx
import { T } from 'gt-react';

function Welcome() {
  return (
    <T>
      <h1>Welcome to our app</h1>
    </T>
  );
}
```

Les projets Next.js importent plutôt [`<T>`](/docs/react/reference/components/t) depuis `gt-next`.

Lorsque l’injection est activée, le compilateur détecte le texte à traduire et l’encapsule automatiquement lors du build.

```jsx
function Welcome() {
  return <h1>Welcome to our app</h1>;
}
```

Le texte que vous avez déjà encapsulé dans [`<T>`](/docs/react/reference/components/t), ainsi que les autres composants General Translation comme [`<Var>`](/docs/react/reference/components/var), [`<Branch>`](/docs/react/reference/components/branch), [`<Plural>`](/docs/react/reference/components/plural) et [`<Derive>`](/docs/react/reference/components/derive), reste inchangé.

## Next steps

- /docs/cli/guides/using-autoderive
- /docs/cli/guides/generating-translations
- /docs/cli/guides/configuring
- /docs/cli/guides/managing-translations

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.