TanStack Start i18n — Full-Stack-Lokalisierung
Ergänzen Sie Ihre TanStack Start App um Internationalisierung mit SSR-Unterstützung, automatischer Spracherkennung und typsicheren Übersetzungen, die auf Client und Server funktionieren.
Set up in 4 steps
Install packages
Installieren Sie @better-i18n/use-intl und use-intl. Zusätzliche Build-Plugins oder Babel-Transformationen sind nicht nötig.
npm install @better-i18n/use-intl use-intlLoad messages server-side
Laden Sie die Übersetzungen im Root-Loader, damit sie schon beim ersten Server-Render verfügbar sind. Kein separater API-Aufruf vom 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' };
},
});Mit BetterI18nProvider umschließen
Übergeben Sie die Loader-Daten an BetterI18nProvider. Der Provider hydriert den Client mit denselben Messages, die auf dem Server geladen wurden.
// 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
Rufen Sie useTranslations() in jeder Routen-Komponente auf. Derselbe Hook funktioniert in Client- und Server-Komponenten.
// 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>
);
}Warum Better I18N mit TanStack Start einsetzen?
Other frameworks
Get started
Eine mehrsprachige TanStack Start App bauen
Verwalten Sie alle Übersetzungen in einem Dashboard mit KI-gestützten Vorschlägen, kontextbewussten Übersetzungen und CDN-Auslieferung.