# General Translation React SDKs (gt-react, gt-next): Inicio rápido de TanStack Start
URL: https://generaltranslation.com/es/docs/react/tanstack-start-quickstart.mdx
---
title: Inicio rápido de TanStack Start
description: Agrega General Translation a una app de TanStack Start con gt-tanstack-start y traduce tu primer contenido.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/managing-locales
    - /docs/react/guides/formatting-variables

---

`gt-tanstack-start` añade internacionalización automática a las apps de TanStack Start. Inicializas General Translation en la ruta raíz, determinas la configuración regional de la solicitud y cargas `GTProvider` desde un loader de ruta.

Usa este inicio rápido para apps de TanStack Start. Para una SPA de React sencilla, usa el [Inicio rápido de React](/docs/react/react-quickstart).

<Callout type="warning">
  `gt-tanstack-start` es experimental y puede incluir cambios incompatibles. Aún no se recomienda para uso en producción.
</Callout>

## inicio rápido [#quickstart]

Instala los paquetes, crea un archivo de configuración y un loader de traducciones, configura la ruta raíz, marca el contenido para traducir y genera las traducciones.

### 1. Instala `gt-tanstack-start`

Instala `gt-tanstack-start` y `gt-react` como dependencias, y la [CLI de `gt`](/docs/cli/quickstart) como dependencia de desarrollo. `gt-react` es necesario directamente para que la CLI pueda detectar los componentes [`<T>`](/docs/react/reference/components/t) en tu código fuente.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-tanstack-start gt-react && npm install gt --save-dev
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-tanstack-start gt-react && yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-tanstack-start gt-react && bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-tanstack-start gt-react && pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

### 2. Crea `gt.config.json`

Crea un archivo `gt.config.json` en la raíz de tu proyecto. Indica el idioma de origen, las configuraciones regionales de destino y dónde se guardan los archivos de traducción.

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

* `defaultLocale` — el idioma en el que está escrita tu app.
* `locales` — los idiomas a los que se traducirá. Elígelos entre las [configuraciones regionales admitidas](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` — donde el CLI guarda los archivos de traducción. Mantenlos en `src/` para que Vite pueda importarlos; los archivos de `public/` no se resolverán.

### 3. Crea un cargador de traducciones

Crea un archivo `loadTranslations.ts` que importe en runtime el archivo de traducción correspondiente a una configuración regional.

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

### 4. Configura la ruta raíz

En `src/routes/__root.tsx`, llama a [`initializeGT`](/docs/node/reference/functions/initialize-gt) a nivel de módulo, obtén la configuración regional con `parseLocale` y carga una instantánea de traducciones en el loader de la ruta. Pasa `locale` y `translations` a `GTProvider`.

```tsx title="src/routes/__root.tsx"
import {
  HeadContent,
  Scripts,
  createRootRoute,
} from '@tanstack/react-router';
import {
  initializeGT,
  GTProvider,
  parseLocale,
  getTranslationsSnapshot,
  LocaleSelector,
} from 'gt-tanstack-start';
import gtConfig from '../../gt.config.json';
import loadTranslations from '../../loadTranslations';

// Inicializar General Translation una vez, a nivel de módulo
initializeGT({ ...gtConfig, loadTranslations });

export const Route = createRootRoute({
  loader: async () => {
    const locale = parseLocale();
    return {
      locale,
      translations: await getTranslationsSnapshot(locale),
    };
  },
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  const { locale, translations } = Route.useLoaderData();
  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        <GTProvider locale={locale} translations={translations}>
          <LocaleSelector />
          {children}
        </GTProvider>
        <Scripts />
      </body>
    </html>
  );
}
```

`parseLocale` obtiene la configuración regional de la cookie y de las cabeceras de la solicitud en el servidor, y de la cookie en el navegador. `GTProvider` requiere tanto `locale` como `translations`.

### 5. Marcar el contenido para su traducción

Envuelve el JSX con el componente `<T>` para traducirlo en el mismo documento. Importa `<T>` y [`useGT`](/docs/react/reference/hooks/use-gt) desde `gt-react` para que la CLI los detecte al analizar tu código fuente.

```tsx title="src/routes/index.tsx"
import { createFileRoute } from '@tanstack/react-router';
import { T, useGT } from 'gt-react';

export const Route = createFileRoute('/')({ component: Home });

function Home() {
  const gt = useGT();

  return (
    <main>
      <T>
        <h1>Welcome to my app</h1>
        <p>This content is translated automatically.</p>
      </T>
      <input aria-label={gt('Email input field')} />
    </main>
  );
}
```

`useGT()` devuelve la función de traducción directamente, así que llámala como `const gt = useGT();`.

### 6. Generar traducciones

Ejecuta la CLI para traducir tu proyecto con la API de General Translation.

```bash
npx gt translate
```

Agrega el comando a tu script de compilación para que las compilaciones de producción siempre cuenten con traducciones actualizadas:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && vite build"
  }
}
```

*Nota: `npx gt translate` necesita un ID de proyecto y una API key de producción configurados como `GT_PROJECT_ID` y `GT_API_KEY` en tu entorno. Ejecuta `npx gt auth` o visita el [panel de control](/docs/platform/dashboard/get-started) para obtenerlos.*
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/formatting-variables