# gt: General Translation CLI tool: Использование автоматической инъекции JSX
URL: https://generaltranslation.com/ru/docs/cli/guides/using-auto-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как оборачивать переводимый JSX-текст в компоненты General Translation на этапе сборки с помощью автоматической инъекции JSX.

Автоматическая инъекция JSX позволяет компилятору оборачивать переводимый JSX-текст в компоненты [`<T>`](/docs/react/reference/components/t) на этапе сборки, поэтому вам не нужно добавлять их вручную.

По умолчанию автоматическая инъекция JSX отключена. Она работает в одностраничных приложениях React (SPA), в React-приложениях с серверным рендерингом и в webpack-сборках Next.js.

## Включить автоматическую инъекцию JSX [#enable]

Установите компилятор:

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

Укажите `enableAutoJsxInjection` в `files.gt.parsingFlags` файла `gt.config.json`. Это сохраняет синхронизацию между извлечением через CLI и преобразованиями компилятора.

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

## Настройте сборку [#configure-build]

Флаг в `gt.config.json` применяется при запуске компилятора General Translation.

### React SPA

Добавьте `@generaltranslation/compiler` в конфигурацию Vite, webpack, Rollup, Rspack или esbuild. Примеры адаптеров см. в разделе [Разработка с переводом для SPA](/docs/react/guides/developing-spa-translations#setup).

### React-приложения (не SPA) [#react-apps]

Для React-приложений с серверным рендерингом, использующих Vite, добавьте плагин компилятора в конфигурацию 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

Настройте `gt-next` для использования webpack-компилятора на базе Babel:

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

const nextConfig = {};

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

Запустите и сервер разработки, и production-сборку с помощью webpack:

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

В Next.js 16 по умолчанию используется Turbopack. Turbopack отключает компилятор Babel, предупреждает, что автоматическая инъекция будет пропущена, и не оборачивает JSX. См. [параметры компилятора Next.js](/docs/react/nextjs/config#compiler-options).

## Как это работает [#how]

Если не использовать инъекцию, вам нужно самим оборачивать текст для перевода.

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

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

В проектах Next.js вместо этого импортируется [`<T>`](/docs/react/reference/components/t) из `gt-next`.

Когда инъекция включена, компилятор обнаруживает переводимый текст и автоматически оборачивает его на этапе сборки.

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

Текст, который вы уже обернули в [`<T>`](/docs/react/reference/components/t), вместе с другими компонентами General Translation, такими как [`<Var>`](/docs/react/reference/components/var), [`<Branch>`](/docs/react/reference/components/branch), [`<Plural>`](/docs/react/reference/components/plural) и [`<Derive>`](/docs/react/reference/components/derive), остаётся без изменений.

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