# tanstack-start: Quickstart di TanStack Start
URL: https://generaltranslation.com/it/docs/tanstack-start.mdx
---
title: Quickstart di TanStack Start
description: Internazionalizza la tua app TanStack Start con gt-tanstack-start
---
**Prerequisiti:** progetto TanStack Start con React 16.8+
**Sperimentale:** `gt-tanstack-start` è ancora in sviluppo attivo e non è ancora consigliato per l'uso in produzione.
## Installazione
Installa `gt-tanstack-start`, `gt-react` e la 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` deve essere una dipendenza diretta affinché la CLI `gt` possa rilevare i componenti `` nel codice sorgente.
## Configurazione
### `gt.config.json`
Crea un file `gt.config.json` nella root del progetto:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "ja"],
"files": {
"gt": {
"output": "src/_gt/[locale].json"
}
}
}
```
I file di traduzione **devono** trovarsi all'interno di `src/` perché le importazioni dinamiche di Vite funzionino. `public/` non funziona.
### Caricatore delle traduzioni
Crea un file `loadTranslations.ts` nella root del tuo progetto:
```ts title="loadTranslations.ts"
export default async function loadTranslations(locale: string) {
const translations = await import(`./src/_gt/${locale}.json`);
return translations.default;
}
```
### Setup della route root
Aggiorna `src/routes/__root.tsx` per inizializzare GT e fornire le traduzioni:
```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'
// Inizializza GT a livello di modulo
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}
)
}
```
## Utilizzo
Racchiudi il contenuto in `` per tradurlo. Importa `` da `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 (
Benvenuto nella nostra app!
Questo contenuto viene tradotto automaticamente.
)
}
```
Importa `` da `gt-react` (non `gt-tanstack-start`). La CLI `gt` analizza le importazioni `gt-react` per individuare i contenuti traducibili.
## Generare le traduzioni
### Utilizzare General Translation (consigliato)
Esegui il comando `gt translate` per generare le traduzioni:
```bash
npx gt translate
```
Questo invia il contenuto all'API di General Translation e scarica i file JSON tradotti in `src/_gt/`.
Ti serviranno le variabili d'ambiente per l'API:
```bash title=".env"
GT_API_KEY="your-api-key"
GT_PROJECT_ID="your-project-id"
```
Ottieni le tue chiavi API gratuite su [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) oppure esegui:
```bash
npx gt auth
```
### Traduzioni manuali
Se preferisci gestire tu le traduzioni:
1. Genera i file della lingua di origine:
```bash
npx gt generate
```
2. Traduci manualmente i file JSON generati
3. Salvali in `src/_gt/{locale}.json`
## Test
Avvia il server di sviluppo:
```bash
npm run dev
```
```bash
yarn dev
```
```bash
bun run dev
```
```bash
pnpm dev
```
Apri [localhost:3000](http://localhost:3000) e usa il selettore di impostazione regionale per cambiare lingua. Le traduzioni vengono caricate da file JSON locali, quindi il cambio di lingua è immediato.
## Deployment
Aggiungi il passaggio di traduzione allo script di build:
```json title="package.json"
{
"scripts": {
"build": "npx gt translate && vite build"
}
}
```
## App di esempio
Consulta l'esempio completo e funzionante: [tanstack-start-basic](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic)
***
## Passaggi successivi
* Leggi la [panoramica](/docs/tanstack-start/introduction) per approfondire l'API
* Scopri i [componenti variabili](/docs/react/guides/variables) come ``, `` e ``
* Esplora il riferimento API del [componente ``](/docs/react/api/components/t)