# tanstack-start: Panoramica URL: https://generaltranslation.com/it/docs/tanstack-start/introduction.mdx --- title: Panoramica description: Panoramica dell’SDK TanStack Start di General Translation --- ## Introduzione `gt-tanstack-start` è un'integrazione open source per l'internazionalizzazione (i18n) delle applicazioni [TanStack Start](https://tanstack.com/start). Porta nel framework TanStack Start la stessa esperienza di sviluppo di [`gt-next`](/docs/next) — racchiudi il contenuto in `` e viene tradotto. Basato su [`gt-react`](/docs/react), aggiunge funzionalità specifiche di TanStack Start, come il rilevamento isomorfo dell'impostazione regionale e l'integrazione con il root loader. **Sperimentale:** `gt-tanstack-start` è in fase di sviluppo attivo. Le API possono cambiare tra una versione minor e l'altra. L'uso in produzione non è ancora consigliato. ## Come funziona Inizializza con [`initializeGT()`](#initialization-with-initializegt) nella route root Carica le traduzioni nel [loader root](#root-loader) Avvolgi l'app con [``](#the-gtprovider-component) Usa [``](#the-t-component) per tradurre il contenuto ## Inizializzazione con `initializeGT` La funzione `initializeGT()` configura il gestore dell'i18n. Chiamala all'inizio del file della route root: ```tsx title="src/routes/__root.tsx" import { initializeGT } from 'gt-tanstack-start' import gtConfig from '../../gt.config.json' import loadTranslations from '../../loadTranslations' initializeGT({ ...gtConfig, loadTranslations, }) ``` ## loader root Usa `getTranslations()` e `getLocale()` nel loader della route root per recuperare le traduzioni corrette per la richiesta attuale: ```tsx title="src/routes/__root.tsx" import { getTranslations, getLocale } from 'gt-tanstack-start' export const Route = createRootRoute({ loader: async () => { return { translations: await getTranslations(), locale: getLocale(), } }, // ... }) ``` ## Il componente `` Il componente `` fornisce il contesto di traduzione a tutti i componenti figli. Passa le traduzioni e l'impostazione regionale dal loader: ```tsx title="src/routes/__root.tsx" import { GTProvider } from 'gt-tanstack-start' function RootDocument({ children }: { children: React.ReactNode }) { const { translations, locale } = Route.useLoaderData() return ( {children} ) } ``` ## Il componente `` Il componente [``](/docs/react/api/components/t) traduce il contenuto JSX. Racchiudi qualsiasi elemento e ne verrà eseguito il rendering nella lingua dell'utente: ```tsx import { T } from 'gt-react' function Welcome() { return (

Welcome to our app!

This content is automatically translated.

) } ``` Importa `` da `gt-react`, non da `gt-tanstack-start`. In questo modo la CLI `gt` può rilevare i contenuti da tradurre durante la generazione dei file di traduzione. ## Selettore di impostazione regionale Aggiungi un `` per permettere agli utenti di cambiare lingua: ```tsx import { LocaleSelector } from 'gt-tanstack-start' function Nav() { return ( ) } ``` *** ## Passaggi successivi * Configura il tuo progetto con la [guida Quickstart](/docs/tanstack-start) * Esplora l'[app di esempio](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic) * Scopri i [componenti variabili](/docs/react/guides/variables) come ``, `` e ``