TanStack Start i18n
TanStack Start i18n — uçtan uca yerelleştirme
TanStack Start uygulamanıza SSR desteği, otomatik dil algılama ve hem istemcide hem sunucuda çalışan tip güvenli çevirilerle uluslararasılaştırma ekleyin.
Setup
Set up in 4 steps
Install packages
@better-i18n/use-intl ve use-intl paketlerini kurun. Ek build eklentisi ya da Babel dönüşümü gerekmez.
terminal
npm install @better-i18n/use-intl use-intlLoad messages server-side
Çevirileri kök loader'da yükleyin; böylece ilk sunucu render'ında hazır olurlar. İstemciden ayrı bir API çağrısı gerekmez.
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({
projectId: 'your-org/your-project',
locale: context.locale ?? 'en',
});
return { messages, locale: context.locale ?? 'en' };
},
});BetterI18nProvider ile sarın
Loader verisini BetterI18nProvider'a geçirin. Provider, istemciyi sunucuda yüklenen aynı mesajlarla hydrate eder.
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>
);
}Use in routes
Herhangi bir route bileşeninde useTranslations() çağırın. Aynı hook hem istemci hem sunucu bileşenlerinde çalışır.
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>
);
}Capabilities
Better I18N neden TanStack Start ile kullanılır?
SSR hydration — sunucuda yüklenen mesajlar, yeniden istek atmadan istemciyi hydrate eder
İçerik titremesi yok — ilk render'da çevrilmiş içerik
Dinamik dil — dil listesi CDN manifest'inden gelir, kodda sabit değer yok
Yol tabanlı yönlendirme — /tr/about, /de/about URL yapısı
Uçtan uca tip güvenliği — loader ve bileşen aynı tip sistemini paylaşır
Cookie ve header algılama — URL → cookie → Accept-Language yedek zinciri
Other frameworks
Get started
Çok dilli bir TanStack Start uygulaması geliştirin
Tüm çevirilerinizi tek bir panelde, yapay zeka destekli öneriler, bağlama duyarlı çeviriler ve CDN dağıtımıyla yönetin.