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

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:

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

Next Steps

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