Getting Started

Overview

TanStack Start is a full-stack React framework with excellent SSR support. Our integration provides:

Dynamic language discovery - Languages are fetched from the CDN manifest
Server-side message loading - No flash of untranslated content
Middleware-based locale detection - From cookies, headers, or URL
Hydration-safe - Consistent rendering between server and client

Integrating with AI? Run npx skills add better-i18n/skills first — your agent (Cursor, Claude Code, or Windsurf) will already know the SDK patterns, CDN behavior, and key conventions. Then just ask it to set up the integration for you. Learn more →

Installation

npm install @better-i18n/use-intl use-intl

yarn add @better-i18n/use-intl use-intl

pnpm add @better-i18n/use-intl use-intl

bun add @better-i18n/use-intl use-intl

Quick Start

Get up and running with the basic setup:

1. Setup

Configuration, provider, and basic usage.

2. SSR

Server-side rendering and hydration.

3. Routing

Path-based locale routing for SEO.

4. Middleware

Automatic locale detection.

Features

Dynamic Languages

Languages are automatically fetched from your CDN manifest. Add a new language in the dashboard and it appears in your app without code changes.

SSR Support

Messages are loaded on the server and hydrated on the client:

// Server: Loads messages in loader
loader: async ({ context }) => {
  const messages = await getMessages({ project: 'org/project', locale: 'en' })
  return { messages }
}

// Client: Hydrates with same messages
<BetterI18nProvider messages={messages} ... />

Path-Based Routing

SEO-friendly URLs with locale prefixes:

/about         → Default locale (English)
/tr/about      → Turkish
/de/about      → German

Middleware Detection

Automatic locale detection from:

URL path (/tr/about)
Cookies (locale=tr)
Accept-Language header