# General Translation React SDKs (gt-react, gt-next): Configura TanStack Start URL: https://generaltranslation.com/it/docs/react/tanstack-start/setup.mdx --- title: Configura TanStack Start description: Inizializza General Translation in un'app TanStack Start, determina l'impostazione regionale e idrata il provider dalla root route. --- `gt-tanstack-start` si configura interamente nella root route. Chiami [`initializeGT`](/docs/node/reference/functions/initialize-gt) a livello di modulo, determini l'impostazione regionale della richiesta con `parseLocale`, carichi uno snapshot delle traduzioni nel loader della route e passi entrambi a [``](/docs/react/reference/components/gt-provider). Poiché TanStack Start esegue il rendering sul server, il provider ha bisogno dell'impostazione regionale e delle traduzioni fin da subito, quindi questo schema le idrata dal loader. Questa pagina copre la configurazione specifica di TanStack Start. Per la procedura completa, inclusi l'installazione e la CLI, segui il [Quickstart di TanStack Start](/docs/react/tanstack-start-quickstart). *Avvertenza: `gt-tanstack-start` è sperimentale e potrebbe introdurre modifiche incompatibili.* ## Carica le traduzioni [#load-translations] Crea una funzione [`loadTranslations`](/docs/react/reference/functions/load-translations) che importi il file di traduzione per un'impostazione regionale. Tieni i file in `src/` in modo che Vite possa importarli. ```ts title="loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./src/_gt/${locale}.json`); return translations.default; } ``` La CLI genera questi file quando esegui `npx gt translate`. ## Inizializza e determina l'impostazione regionale [#initialize] `initializeGT`, `parseLocale` e [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) vengono importati da `gt-tanstack-start`: * **`initializeGT`** — chiamalo una sola volta nel modulo della root route. Usa lo spread di `gt.config.json` e passa `loadTranslations`. * **`parseLocale`** — legge l'impostazione regionale dal cookie della richiesta e dall'header `Accept-Language` sul server, e dal cookie nel browser. Salva poi l'impostazione regionale determinata nel cookie. * **`getTranslationsSnapshot`** — carica le traduzioni di un'impostazione regionale nel formato previsto da ``, così il contenuto viene visualizzato senza effetti flash durante il caricamento. Consulta il [riferimento](/docs/react/reference/functions/get-translations-snapshot). ## Configura la root route [#root-route] In `src/routes/__root.tsx`, esegui l'inizializzazione a livello di modulo, ricava l'impostazione regionale e carica lo snapshot nel loader, quindi passa `locale` e `translations` a `` nel componente shell. ```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'; // Inizializza General Translation una volta sola, a livello di modulo 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 ( {children} ); } ``` `` qui richiede sia `locale` sia `translations`, a differenza di Next.js, dove è il server a risolverli, o di React Native, dove il provider li carica autonomamente. ## Contrassegna il contenuto per la traduzione [#content] Nei componenti della route, avvolgi il JSX in [``](/docs/react/reference/components/t) e traduci le stringhe con [`useGT`](/docs/react/reference/hooks/use-gt). Importali da `gt-react` in modo che la CLI li rilevi durante la scansione del codice sorgente. ```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 (

Welcome to my app

This content is translated automatically.

); } ```