i18n v TanStack Start — lokalizace v celém stacku
Přidejte do aplikace TanStack Start internacionalizaci: podpora SSR, automatická detekce jazyka a typově bezpečné překlady, které fungují na klientovi i na serveru.
Set up in 4 steps
Install packages
Nainstalujte @better-i18n/use-intl a use-intl. Další build pluginy ani transformace Babelu nejsou potřeba.
npm install @better-i18n/use-intl use-intlLoad messages server-side
Načtěte překlady v root loaderu, aby byly dostupné už při prvním renderu na serveru. Žádný samostatný požadavek na API z klienta.
// 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' };
},
});Obalte komponentou BetterI18nProvider
Předejte data z loaderu do BetterI18nProvider. Provider hydratuje klienta stejnými zprávami, které byly načteny na serveru.
// 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
Zavolejte useTranslations() v jakékoli komponentě trasy. Stejný hook funguje v klientských i serverových komponentách.
// 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>
);
}Proč používat Better I18N s TanStack Start?
Other frameworks
Get started
Postavte vícejazyčnou aplikaci TanStack Start
Spravujte všechny překlady v jednom dashboardu: návrhy od AI, překlady zohledňující kontext a doručování přes CDN.