# tanstack-start: TanStack Start Quickstart
URL: https://generaltranslation.com/es/docs/tanstack-start.mdx
---
title: TanStack Start Quickstart
description: Internacionaliza tu aplicación TanStack Start con gt-tanstack-start
---
**Requisitos previos:** proyecto de TanStack Start con React 16.8+
**Experimental:** `gt-tanstack-start` está en desarrollo activo y todavía no se recomienda para su uso en producción.
## Instalación
Instala `gt-tanstack-start`, `gt-react` y la CLI de `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` es una dependencia directa necesaria para que la CLI de `gt` pueda detectar los componentes `` en tu código fuente.
## Configuración
### `gt.config.json`
Crea un `gt.config.json` en la root de tu proyecto:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "ja"],
"files": {
"gt": {
"output": "src/_gt/[locale].json"
}
}
}
```
Los archivos de traducción **deben** estar en `src/` para que las importaciones dinámicas de Vite funcionen. Si usas `public/`, no funcionará.
### Cargador de traducciones
Crea un archivo `loadTranslations.ts` en el root de tu proyecto:
```ts title="loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`./src/_gt/${locale}.json`);
return translations.default;
}
```
### Configuración de la ruta root
Actualiza `src/routes/__root.tsx` para inicializar GT y proporcionar traducciones:
```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'
// Inicializar GT a nivel de módulo
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}
)
}
```
## Uso
Envuelve el contenido en `` para traducirlo. Importa `` desde `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 (
¡Bienvenido a nuestra aplicación!
Este contenido se traduce automáticamente.
)
}
```
Importa `` desde `gt-react` (no desde `gt-tanstack-start`). La CLI `gt` analiza las importaciones de `gt-react` para encontrar contenido traducible.
## Generar traducciones
### Uso de General Translation (recomendado)
Ejecuta el comando `gt translate` para generar las traducciones:
```bash
npx gt translate
```
Esto envía tu contenido a la API de General Translation y descarga los archivos JSON traducidos en `src/_gt/`.
Necesitarás variables de entorno para la API:
```bash title=".env"
GT_API_KEY="your-api-key"
GT_PROJECT_ID="your-project-id"
```
Obtén gratis tus claves API en [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) o ejecuta:
```bash
npx gt auth
```
### Traducciones manuales
Si prefieres gestionar las traducciones tú mismo:
1. Genera los archivos de la lengua de origen:
```bash
npx gt generate
```
2. Traduce manualmente los archivos JSON generados
3. Colócalos en `src/_gt/{locale}.json`
## Pruebas
Inicia el servidor de desarrollo:
```bash
npm run dev
```
```bash
yarn dev
```
```bash
bun run dev
```
```bash
pnpm dev
```
Visita [localhost:3000](http://localhost:3000) y usa el selector de configuración regional para cambiar de idioma. Las traducciones se cargan desde archivos JSON locales, así que el cambio de idioma es instantáneo.
## Deployment
Añade el paso de traducción a tu script de build:
```json title="package.json"
{
"scripts": {
"build": "npx gt translate && vite build"
}
}
```
## Aplicación de ejemplo
Consulta el ejemplo completo y funcional: [tanstack-start-basic](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic)
***
## Próximos pasos
* Lee la [Descripción general](/docs/tanstack-start/introduction) para conocer mejor la API
* Aprende sobre los [componentes de variable](/docs/react/guides/variables), como ``, `` y ``
* Explora la referencia de la API del [componente ``](/docs/react/api/components/t)