TanStack Start

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

Installation #

npm install @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({ projectId: '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

Next Steps #

Start with the Setup Guide for step-by-step instructions.

AI Tooling #

Now that you've integrated the SDK, your AI agent can check coverage, translate keys, and publish — all without leaving your editor.

• MCP Server — Translate keys, check coverage, and publish — all from your editor via Cursor, Claude Code, or Windsurf.
• Agent Skill — Permanent better-i18n knowledge for your AI agent — SDK patterns, CDN behavior, key conventions. No prompts needed each session.