TanStack Start-i18n — full-stack localisatie
Voeg internationalisatie toe aan uw TanStack Start-app met SSR-ondersteuning, automatische taaldetectie en typeveilige vertalingen die zowel op de client als op de server werken.
Set up in 4 steps
Install packages
Installeer @better-i18n/use-intl en use-intl. Extra build-plugins of Babel-transformaties zijn niet nodig.
npm install @better-i18n/use-intl use-intlLoad messages server-side
Haal de vertalingen op in de root-loader, zodat ze al bij de eerste serverrender beschikbaar zijn. Geen aparte API-aanroep vanaf de 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' };
},
});Omhullen met BetterI18nProvider
Geef de loader-gegevens door aan BetterI18nProvider. De provider hydrateert de client met dezelfde berichten die op de server zijn geladen.
// 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
Roep useTranslations() aan in elke routecomponent. Dezelfde hook werkt in client- en servercomponenten.
// 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>
);
}Waarom Better I18N gebruiken met TanStack Start?
Other frameworks
Get started
Een meertalige TanStack Start-app bouwen
Beheer al uw vertalingen in één dashboard, met AI-suggesties, contextbewuste vertalingen en levering via het CDN.