i18n TanStack Start — localisation full-stack
Ajoutez l'internationalisation à votre application TanStack Start avec la prise en charge du SSR, la détection automatique de la langue et des traductions typées qui fonctionnent côté client comme côté serveur.
Set up in 4 steps
Install packages
Installez @better-i18n/use-intl et use-intl. Aucun plugin de build supplémentaire ni transformation Babel n'est nécessaire.
npm install @better-i18n/use-intl use-intlLoad messages server-side
Récupérez les traductions dans le loader racine, pour qu'elles soient disponibles dès le premier rendu serveur. Aucun appel d'API séparé depuis le 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' };
},
});Envelopper avec BetterI18nProvider
Transmettez les données du loader à BetterI18nProvider. Le provider hydrate le client avec les mêmes messages que ceux chargés sur le serveur.
// 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
Appelez useTranslations() dans n'importe quel composant de route. Le même hook fonctionne dans les composants client et serveur.
// 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>
);
}Pourquoi utiliser Better I18N avec TanStack Start ?
Other frameworks
Get started
Créer une application TanStack Start multilingue
Gérez toutes vos traductions dans un seul tableau de bord, avec des suggestions par IA, des traductions sensibles au contexte et une livraison par CDN.