TanStack Start i18n
TanStack Start i18n — Full-Stack Localization
Add internationalization to your TanStack Start app with SSR support, automatic locale detection, and type-safe translations that work on both client and server.
Set up in 4 steps
1
Install packages
Install @better-i18n/use-intl and use-intl. No additional build plugins or Babel transforms required.
terminal
npm install @better-i18n/use-intl use-intl
2
Load messages server-side
Fetch translations in the root loader so they are available on the very first server render. No separate API call from the client.
app/routes/__root.tsx
// app/routes/__root.tsx
import { getMessages } from '@better-i18n/use-intl/server';
export const Route = createRootRoute({
loader: async ({ context }) => {
const messages = await getMessages({
project: 'your-org/your-project',
locale: context.locale ?? 'en',
});
return { messages, locale: context.locale ?? 'en' };
},
});3
Wrap with BetterI18nProvider
Pass the loader data into BetterI18nProvider. The provider hydrates the client with the same messages loaded on the server.
app/routes/__root.tsx
// 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>
);
}4
Use in routes
Call useTranslations() in any route component. The same hook works on both client and server components.
app/routes/about.tsx
// 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>
);
}Why use Better i18n with TanStack Start?
SSR hydration — server-loaded messages hydrate client without re-fetch
No content flash — translated content on the very first render
Dynamic locale — language list from CDN manifest, no hardcoding
Path-based routing — /tr/about, /de/about URL structure
Full-stack type safety — loader and component share the same type system
Cookie + header detection — URL → cookie → Accept-Language fallback chain
Build a multilingual TanStack Start app
Manage all your translations in one dashboard with AI-powered suggestions, context-aware translations, and CDN delivery.