i18n per TanStack Start — localizzazione full-stack
Aggiungi l'internazionalizzazione alla tua app TanStack Start con supporto SSR, rilevamento automatico della lingua e traduzioni type-safe che funzionano sia sul client sia sul server.
Set up in 4 steps
Install packages
Installa @better-i18n/use-intl e use-intl. Non servono plugin di build aggiuntivi né trasformazioni Babel.
npm install @better-i18n/use-intl use-intlLoad messages server-side
Carica le traduzioni nel loader radice, così sono disponibili già al primo render sul server. Nessuna chiamata API separata dal client.
// app/routes/__root.tsx
import { getMessages } from '@better-i18n/use-intl/server';
export const Route = createRootRoute({
loader: async ({ context }) => {
const messages = await getMessages({
projectId: 'your-org/your-project',
locale: context.locale ?? 'en',
});
return { messages, locale: context.locale ?? 'en' };
},
});Racchiudi con BetterI18nProvider
Passa i dati del loader a BetterI18nProvider. Il provider idrata il client con gli stessi messaggi caricati sul server.
// app/routes/__root.tsx (continued)
import { BetterI18nProvider } from '@better-i18n/use-intl';
export function RootComponent() {
const { messages, locale } = Route.useLoaderData();
return (
<BetterI18nProvider
messages={messages}
locale={locale}
project="your-org/your-project"
>
<Outlet />
</BetterI18nProvider>
);
}Use in routes
Chiama useTranslations() in qualsiasi componente di route. Lo stesso hook funziona nei componenti client e server.
// app/routes/about.tsx
import { useTranslations } from '@better-i18n/use-intl';
export default function AboutPage() {
const t = useTranslations('pages');
return (
<main>
<h1>{t('about.title')}</h1>
<p>{t('about.description')}</p>
</main>
);
}Perché usare Better I18N con TanStack Start?
Other frameworks
Get started
Crea un'app TanStack Start multilingue
Gestisci tutte le traduzioni in un'unica dashboard con suggerimenti basati sull'IA, traduzioni consapevoli del contesto e distribuzione via CDN.