# gt: General Translation CLI tool: Uso dell'iniezione automatica di JSX
URL: https://generaltranslation.com/it/docs/cli/guides/using-auto-jsx.mdx
---

title: Uso dell'iniezione automatica di JSX
description: Come avvolgere il testo JSX traducibile nei componenti di General Translation in fase di build con l'iniezione automatica di JSX.
related:
  links:
    - /docs/cli/guides/using-autoderive
    - /docs/cli/guides/generating-translations
    - /docs/cli/guides/configuring
    - /docs/cli/guides/managing-translations

---

L&#39;iniezione automatica di JSX fa sì che il compilatore avvolga il testo JSX traducibile nei componenti [`<T>`](/docs/react/reference/components/t) in fase di build, così non devi aggiungerli manualmente.

L&#39;iniezione automatica di JSX è disattivata per impostazione predefinita. Funziona nelle single-page app (SPA) React e nelle build webpack di Next.js.

## Abilita l&#39;iniezione automatica di JSX [#enable]

Installa il compilatore:

<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>

Imposta `enableAutoJsxInjection` in `files.gt.parsingFlags` di `gt.config.json`. In questo modo, l&#39;estrazione tramite CLI e le trasformazioni del compilatore rimangono sincronizzate.

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

## Configurare la build [#configure-build]

Il flag `gt.config.json` ha effetto quando viene eseguito il compilatore di General Translation.

### Single-page app React

Aggiungi `@generaltranslation/compiler` alla configurazione di Vite, webpack, Rollup, Rspack o esbuild. Consulta [Sviluppo con la traduzione per SPA](/docs/react/guides/developing-spa-translations#setup) per esempi di adattatori.

### Next.js

Configura `gt-next` per utilizzare il compilatore webpack basato su Babel:

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

const nextConfig = {};

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

Esegui sia il server di sviluppo sia la build di produzione con webpack:

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

Next.js 16 usa Turbopack per impostazione predefinita. Turbopack disabilita il compilatore Babel, avvisa che l&#39;iniezione automatica verrà ignorata e lascia il JSX senza racchiuderlo. Vedi [opzioni del compilatore di Next.js](/docs/react/nextjs/config#compiler-options).

## Come funziona [#how]

Senza iniezione, devi avvolgere manualmente il testo traducibile.

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

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

I progetti Next.js importano invece [`<T>`](/docs/react/reference/components/t) da `gt-next`.

Con l&#39;iniezione abilitata, il compilatore rileva il testo traducibile e lo avvolge automaticamente in fase di build.

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

Il testo che hai già avvolto in [`<T>`](/docs/react/reference/components/t), insieme ad altri componenti di General Translation come [`<Var>`](/docs/react/reference/components/var), [`<Branch>`](/docs/react/reference/components/branch), [`<Plural>`](/docs/react/reference/components/plural) e [`<Derive>`](/docs/react/reference/components/derive), rimane invariato.
## Next steps

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