# tanstack-start: Обзор URL: https://generaltranslation.com/ru/docs/tanstack-start/introduction.mdx --- title: Обзор description: Обзор SDK TanStack Start от General Translation --- ## Введение `gt-tanstack-start` — это open-source интеграция для интернационализации (i18n) приложений [TanStack Start](https://tanstack.com/start). Она переносит во фреймворк TanStack Start тот же опыт разработки, что и [`gt-next`](/docs/next): оберните содержимое в ``, и оно будет переведено. Построенная на основе [`gt-react`](/docs/react), она добавляет возможности, специфичные для TanStack Start, такие как изоморфное определение локали и интеграция с root loader. **Экспериментально:** `gt-tanstack-start` находится в активной разработке. API могут меняться между минорными версиями. Пока его не рекомендуется использовать в продакшене. ## Как это работает Инициализируйте [`initializeGT()`](#initialization-with-initializegt) в корневом маршруте Загружайте переводы в [корневом загрузчике](#root-loader) Оберните приложение в [``](#the-gtprovider-component) Используйте [``](#the-t-component) для перевода содержимого ## Инициализация с помощью `initializeGT` Функция `initializeGT()` настраивает менеджер i18n. Вызовите её в верхней части файла корневого маршрута: ```tsx title="src/routes/__root.tsx" import { initializeGT } from 'gt-tanstack-start' import gtConfig from '../../gt.config.json' import loadTranslations from '../../loadTranslations' initializeGT({ ...gtConfig, loadTranslations, }) ``` ## Корневой загрузчик Используйте `getTranslations()` и `getLocale()` в загрузчике корневого маршрута, чтобы получить нужные переводы для текущего запроса: ```tsx title="src/routes/__root.tsx" import { getTranslations, getLocale } from 'gt-tanstack-start' export const Route = createRootRoute({ loader: async () => { return { translations: await getTranslations(), locale: getLocale(), } }, // ... }) ``` ## Компонент `` `` предоставляет контекст перевода всем дочерним компонентам. Передайте переводы и локаль из лоадера: ```tsx title="src/routes/__root.tsx" import { GTProvider } from 'gt-tanstack-start' function RootDocument({ children }: { children: React.ReactNode }) { const { translations, locale } = Route.useLoaderData() return ( {children} ) } ``` ## Компонент `` Компонент [``](/docs/react/api/components/t) переводит содержимое JSX. Оберните в него любые элементы, и они будут отображаться на языке пользователя: ```tsx import { T } from 'gt-react' function Welcome() { return (

Welcome to our app!

This content is automatically translated.

) } ``` Импортируйте `` из `gt-react`, а не из `gt-tanstack-start`. Это позволит CLI `gt` обнаруживать переводимый контент при создании файлов перевода. ## Компонент выбора локали Добавьте ``, чтобы пользователи могли переключать языки: ```tsx import { LocaleSelector } from 'gt-tanstack-start' function Nav() { return ( ) } ``` *** ## Следующие шаги * Настройте проект с помощью [краткого руководства](/docs/tanstack-start) * Посмотрите [пример приложения](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic) * Узнайте о [переменных компонентах](/docs/react/guides/variables), таких как ``, `` и ``