# General Translation React SDKs (gt-react, gt-next): Локальное хранение переводов
URL: https://generaltranslation.com/ru/docs/react/guides/storing-translations.mdx
---

title: Локальное хранение переводов
description: Как встроить переводы General Translation в приложение вместо загрузки из CDN — для React, Next.js, TanStack Start и React Native.
related:
  links:
    - /docs/react/guides/configuring
    - /docs/react/guides/developing-spa-translations
    - /docs/react/guides/managing-locales
    - /docs/react/guides/translating-jsx

---

По умолчанию General Translation загружает переводы из своего CDN во время выполнения. Вместо этого вы можете сгенерировать файлы перевода, включить их в приложение и загружать самостоятельно. Это избавляет от зависимости от CDN во время выполнения, но для обновления переводов потребуется повторный деплой.

## Настройте локальный путь вывода [#configure]

В `gt.config.json` укажите путь для вывода файла `gt` в исходном коде, используя заполнитель `[locale]`. Это одинаково для всех фреймворков.

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": { "gt": { "output": "src/_gt/[locale].json" } }
}
```

## Сгенерируйте файлы [#generate]

Запустите CLI, чтобы перевести ваше содержимое и сохранить по одному файлу для каждой локали по этому пути.

```bash
npx gt translate
```

Добавьте это в процесс сборки, чтобы файлы оставались актуальными — например, `"build": "npx gt translate && vite build"` (или `next build`, `expo export` и так далее).

## Загрузите их в приложение [#load]

Добавьте колбэк [`loadTranslations`](/docs/react/reference/functions/load-translations), который импортирует файл для локали. Способ его регистрации зависит от фреймворка.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Передайте `loadTranslations` в вызов инициализации.

    ```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 });
    ```
  </Tab>

  <Tab value="Next.js">
    Создайте файл `loadTranslations.ts` в корне проекта. Плагин `withGTConfig` автоматически его обнаружит (или явно задайте `loadTranslationsPath`).

    ```ts title="loadTranslations.ts"
    export default async function loadTranslations(locale: string) {
      const t = await import(`./_gt/${locale}.json`);
      return t.default;
    }
    ```

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

    export default withGTConfig(nextConfig, { loadTranslationsPath: './loadTranslations.ts' });
    ```
  </Tab>

  <Tab value="TanStack Start">
    Передайте `loadTranslations` в вызов инициализации.

    ```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 });
    ```
  </Tab>

  <Tab value="React Native">
    Передайте `loadTranslations` в вызов инициализации.

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

Если у вас настроен локальный loader, переводы читаются из вашего бандла, и запросы к CDN не выполняются. Чтобы снова использовать CDN, удалите loader и вместо этого укажите `projectId` (см. [Настройка General Translation](/docs/react/guides/configuring#delivery)).
## Next steps

- /docs/react/guides/configuring
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/managing-locales
- /docs/react/guides/translating-jsx