İçeriğe git
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-intl

Load 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.