# tanstack-start: Быстрый старт с TanStack Start
URL: https://generaltranslation.com/ru/docs/tanstack-start.mdx
---
title: Быстрый старт с TanStack Start
description: Интернационализируйте приложение TanStack Start с помощью gt-tanstack-start
---
**Требования:** проект TanStack Start с React 16.8+
**Экспериментально:** `gt-tanstack-start` находится в активной разработке и пока не рекомендуется для использования в продакшене.
## Установка
Установите `gt-tanstack-start`, `gt-react` и CLI `gt`:
```bash
npm i gt-tanstack-start gt-react
npm i -D gt
```
```bash
yarn add gt-tanstack-start gt-react
yarn add --dev gt
```
```bash
bun add gt-tanstack-start gt-react
bun add --dev gt
```
```bash
pnpm add gt-tanstack-start gt-react
pnpm add --save-dev gt
```
`gt-react` должен быть добавлен как прямая зависимость, чтобы CLI `gt` мог находить компоненты `` в исходном коде.
## Конфигурация
### `gt.config.json`
Создайте `gt.config.json` в root-каталоге проекта:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "ja"],
"files": {
"gt": {
"output": "src/_gt/[locale].json"
}
}
}
```
Файлы перевода **должны** находиться в `src/`, чтобы работали динамические импорты Vite. Использование `public/` не сработает.
### Загрузчик переводов
Создайте файл `loadTranslations.ts` в root-каталоге проекта:
```ts title="loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`./src/_gt/${locale}.json`);
return translations.default;
}
```
### Настройка корневого маршрута
Обновите `src/routes/__root.tsx`, чтобы инициализировать GT и подключить переводы:
```tsx title="src/routes/__root.tsx"
import {
HeadContent,
Scripts,
createRootRoute,
} from '@tanstack/react-router'
import {
initializeGT,
GTProvider,
getTranslations,
getLocale,
LocaleSelector,
} from 'gt-tanstack-start'
import gtConfig from '../../gt.config.json'
import loadTranslations from '../../loadTranslations'
// Инициализация GT на уровне модуля
initializeGT({
...gtConfig,
loadTranslations,
})
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
],
}),
loader: async () => {
return {
translations: await getTranslations(),
locale: getLocale(),
}
},
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
const { translations, locale } = Route.useLoaderData()
return (
{children}
)
}
```
## Использование
Оберните содержимое в ``, чтобы оно переводилось. Импортируйте `` из `gt-react`:
```tsx title="src/routes/index.tsx"
import { createFileRoute } from '@tanstack/react-router'
import { T } from 'gt-react'
export const Route = createFileRoute('/')({ component: Home })
function Home() {
return (
Добро пожаловать в наше приложение!
Этот контент переводится автоматически.
)
}
```
Импортируйте `` из `gt-react` (а не из `gt-tanstack-start`). CLI `gt` сканирует импорты `gt-react`, чтобы находить переводимый контент.
## Создание переводов
### Использование General Translation (рекомендуется)
Запустите команду `gt translate`, чтобы сгенерировать переводы:
```bash
npx gt translate
```
Это отправляет контент в API General Translation и скачивает переведённые JSON-файлы в `src/_gt/`.
Для работы с API вам понадобятся переменные окружения:
```bash title=".env"
GT_API_KEY="your-api-key"
GT_PROJECT_ID="your-project-id"
```
Получите бесплатные API-ключи на сайте [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) или выполните:
```bash
npx gt auth
```
### Ручной перевод
Если вы предпочитаете управлять переводом самостоятельно:
1. Сгенерируйте файлы исходного языка:
```bash
npx gt generate
```
2. Переведите сгенерированные JSON-файлы вручную
3. Поместите их в `src/_gt/{locale}.json`
## Тестирование
Запустите сервер разработки:
```bash
npm run dev
```
```bash
yarn dev
```
```bash
bun run dev
```
```bash
pnpm dev
```
Перейдите на [localhost:3000](http://localhost:3000) и используйте компонент выбора локали, чтобы переключаться между языками. Переводы загружаются из локальных JSON-файлов, поэтому смена языка происходит мгновенно.
## Развертывание
Добавьте шаг перевода в скрипт сборки:
```json title="package.json"
{
"scripts": {
"build": "npx gt translate && vite build"
}
}
```
## Пример приложения
Полный рабочий пример см. здесь: [tanstack-start-basic](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic)
***
## Следующие шаги
* Прочитайте [обзор](/docs/tanstack-start/introduction), чтобы подробнее ознакомиться с API
* Узнайте о [переменных компонентах](/docs/react/guides/variables), таких как ``, `` и ``
* Изучите [справку по API компонента ``](/docs/react/api/components/t)