# General Translation React SDKs (gt-react, gt-next, gt-react-native): Настройка General Translation
URL: https://generaltranslation.com/ru/docs/react/guides/configuring.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как инициализировать General Translation, настроить учетные данные и доставлять переводы с помощью `<GTProvider>`.

Для React с серверным рендерингом и каждой интеграции с фреймворком нужны конфигурация и [`GTProvider`](/docs/react/reference/components/gt-provider), который предоставляет переводы вашим компонентам. React SPA инициализируются напрямую через [`initializeGTSPA`](/docs/react/reference/config#initialize-spa); для такой настройки следуйте руководству [Быстрый старт React SPA](/docs/react/react-spa-quickstart).

*Примечание: `gt-react`, `gt-tanstack-start` и `gt-react-native` не читают `gt.config.json` автоматически — импортируйте его и передайте его поля в вызов инициализации. В Next.js плагин [`withGTConfig`](/docs/react/nextjs/config) сам считывает `gt.config.json`.*

## Инициализируйте библиотеку [#initialize]

Настройте General Translation один раз — до первого рендера.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Вызовите [`initializeGT`](/docs/react/reference/config#initialize) один раз в модуле, который загружается и на сервере, и на клиенте. Фреймворк определяет локаль запроса и передаёт соответствующие переводы во время серверного рендеринга.

    ```tsx title="src/routes/root.tsx"
    import { initializeGT } from 'gt-react';
    import gtConfig from '../../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`../_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```

    Колбэки [`loadTranslations`](/docs/react/reference/functions/load-translations) и [`loadDictionary`](/docs/react/reference/functions/load-dictionary), учётные данные и конфигурация локали — всё это передаётся в `initializeGT`, а не в [`GTProvider`](/docs/react/reference/components/gt-provider).
  </Tab>

  <Tab value="Next.js">
    В Next.js нет отдельного вызова инициализации. Добавьте плагин [`withGTConfig`](/docs/react/nextjs/config) в `next.config.ts`; он считывает `gt.config.json` и настраивает переводы во время сборки и обработки запросов.

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

    const nextConfig = {};

    export default withGTConfig(nextConfig, {
      // такие параметры, как `dictionary`, `loadTranslationsPath` и переопределения локали
    });
    ```
  </Tab>

  <Tab value="TanStack Start">
    Вызовите [`initializeGT`](/docs/react/reference/config#initialize) один раз при запуске сервера и клиента, передав вашу конфигурацию через оператор расширения.

    ```tsx
    import { initializeGT } from 'gt-tanstack-start';
    import gtConfig from '../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`./_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```

    Зарегистрируйте [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware), затем используйте [`getLocale`](/docs/react/tanstack-start/reference/functions/get-locale) из `gt-tanstack-start` в области запроса. Если включён [`localeRouting`](/docs/react/reference/config#locale-routing), middleware определяет локаль по префиксу пути до проверки cookie-файла и заголовка `Accept-Language`.
  </Tab>

  <Tab value="React Native">
    Вызовите [`initializeGT`](/docs/react/reference/config#initialize) один раз при запуске приложения, передав вашу конфигурацию через оператор расширения.

    ```tsx
    import { initializeGT } from 'gt-react-native';
    import gtConfig from '../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`./_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```
  </Tab>
</Tabs>

## Добавьте провайдер [#provider]

Оберните приложение в [`GTProvider`](/docs/react/reference/components/gt-provider#contracts), чтобы компоненты могли получать переводы.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Загрузите переводы для активной локали на сервере, а затем передайте оба значения в провайдер. Точный API загрузчика зависит от вашего фреймворка.

    ```tsx title="src/routes/root.tsx"
    import { GTProvider, getTranslationsSnapshot, parseLocale } from 'gt-react';

    export async function loadRoot(request: Request) {
      const locale = parseLocale(request);
      return {
        locale,
        translations: await getTranslationsSnapshot(locale),
      };
    }

    export function Root({ locale, translations, children }) {
      return (
        <GTProvider locale={locale} translations={translations}>
          {children}
        </GTProvider>
      );
    }
    ```

    Провайдер также принимает [`region`](/docs/react/reference/components/gt-provider#region) и [`enableI18n`](/docs/react/reference/components/gt-provider#enable-i18n) (по умолчанию `true`). Когда перевод отключён или активная локаль совпадает с локалью по умолчанию, содержимое отображается на исходном языке.
  </Tab>

  <Tab value="Next.js">
    Оберните корневой layout в [`<GTProvider>`](/docs/react/reference/components/gt-provider#contracts). Он получает локаль запроса и переводы из плагина, поэтому провайдер App Router принимает только `children`.

    ```tsx title="app/layout.tsx"
    import { GTProvider, useLocale } from 'gt-next';

    export default function RootLayout({ children }: { children: React.ReactNode }) {
      const locale = useLocale();
      return (
        <html lang={locale}>
          <body>
            <GTProvider>{children}</GTProvider>
          </body>
        </html>
      );
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    Передайте активную [`locale`](/docs/react/reference/components/gt-provider#locale) и [`translations`](/docs/react/reference/components/gt-provider#translations) для неё. Оба параметра обязательны.

    ```tsx
    import { GTProvider, getTranslationsSnapshot } from 'gt-tanstack-start';

    const translations = await getTranslationsSnapshot(locale);

    <GTProvider locale={locale} translations={translations}>
      <App />
    </GTProvider>;
    ```
  </Tab>

  <Tab value="React Native">
    Оберните приложение в [`<GTProvider>`](/docs/react/reference/components/gt-provider#contracts). Он сам загружает переводы для активной локали, поэтому не принимает пропс `translations`; [`locale`](/docs/react/reference/components/gt-provider#locale) необязателен и по умолчанию берётся из сохранённой локали или локали устройства.

    ```tsx
    import { GTProvider } from 'gt-react-native';

    <GTProvider>
      <App />
    </GTProvider>;
    ```
  </Tab>
</Tabs>

<Callout type="info">
  **Изменено в v11 (React):** провайдер `gt-react` больше не принимает `config`, [`loadTranslations`](/docs/react/reference/functions/load-translations) или учётные данные через пропсы. Теперь эта настройка задаётся при вызове инициализации; провайдер получает только готовые [`locale`](/docs/react/reference/components/gt-provider#locale) и [`translations`](/docs/react/reference/components/gt-provider#translations).
</Callout>

Все параметры провайдера и инициализации см. в [справочнике по конфигурации](/docs/react/reference/config).

## Добавьте учетные данные [#credentials]

Для доставки переводов и возможностей разработки используются идентификатор проекта и API-ключ, заданные через переменные окружения.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Передайте идентификатор проекта и API-ключ для разработки через принятую в вашем фреймворке схему клиентских переменных окружения, а затем передайте их в [`initializeGT`](/docs/react/reference/config#initialize). Никогда не раскрывайте production API-ключ.
  </Tab>

  <Tab value="Next.js">
    Задайте их в окружении; плагин считывает их автоматически. `GT_API_KEY` (production key) используется на сервере и CLI в CI. Используйте префикс `NEXT_PUBLIC_` только для значений, которые должны попасть в браузер.

    ```bash title=".env.local"
    GT_PROJECT_ID="..."
    GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>

  <Tab value="TanStack Start">
    Задайте их через публичные переменные окружения вашего сборщика и передайте в вызов инициализации.

    ```bash title=".env (Vite)"
    VITE_GT_PROJECT_ID="..."
    VITE_GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>

  <Tab value="React Native">
    Задайте их через публичные переменные окружения вашего сборщика и передайте в вызов инициализации.

    ```bash title=".env (Expo)"
    EXPO_PUBLIC_GT_PROJECT_ID="..."
    EXPO_PUBLIC_GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>
</Tabs>

*Примечание: На клиенте раскрывайте только API-ключ для разработки. Production API-ключи используются CLI в CI и никогда не попадают в клиентский код.*

## Выберите способ доставки переводов [#delivery]

General Translation предоставляет переводы в одном из следующих режимов — в зависимости от вашей конфигурации. Во всех фреймворках это работает одинаково:

* **Локальные файлы:** укажите [`loadTranslations`](/docs/react/reference/functions/load-translations), чтобы импортировать JSON, включённый в бандл. См. [Хранение переводов локально](/docs/react/guides/storing-translations).
* **General Translation CDN:** укажите [`projectId`](/docs/react/reference/config#project-id) (без пользовательского загрузчика), чтобы получать переводы из CDN GT во время выполнения.
* **Пользовательский эндпоинт:** задайте собственный [`cacheUrl`](/docs/react/reference/config#cache-url), чтобы загружать переводы со своего хоста.

В среде разработки указание [`projectId`](/docs/react/reference/config#project-id) и API-ключа для разработки включает перевод по запросу и горячую перезагрузку, поэтому новые строки переводятся прямо по мере работы. В production переводы загружаются из заранее сгенерированных файлов или из CDN.

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/storing-translations

## Sitemap

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