better-i18nAbout This Starter
This is a starter template demonstrating how to use better-i18n with Next.js App Router for building multilingual applications.
Tech Stack
Next.js 15
App Router + Server Components
@better-i18n/next
CDN-powered translations
next-intl
Type-safe translation hooks
Tailwind CSS 4
Utility-first styling
TypeScript 5
Full type safety
CDN Translation Architecture
Learn morebetter-i18n uses a CDN-first architecture. When you publish translations in the dashboard, they are deployed to Cloudflare's global edge network for sub-50ms delivery worldwide.
Dashboard publish
Translations are published from the better-i18n dashboard to Cloudflare R2 storage.
Edge CDN delivery
Translation bundles are served from global edge locations with sub-50ms load times.
Server-side rendering
Next.js server components fetch translations at request time via getMessages() for SEO-friendly HTML.
Client hydration
BetterI18nProvider hydrates translations client-side with zero layout shift. useSetLocale() enables instant switching.
The SDK caches manifest data for 5 minutes and translation messages for 30 seconds by default. Cache invalidation happens automatically on publish.
SDK APIs Used in This Starter
Full API reference| API | Type | Purpose |
|---|---|---|
createI18n() | Config | Initialize SDK with project settings |
i18n.betterMiddleware() | Server | Locale detection from URL, cookie, Accept-Language |
i18n.getMessages(locale) | Server | Load all translations for a locale |
i18n.getLocales() | Server | Fetch available locales from CDN |
BetterI18nProvider | Client | React context for translations |
useTranslations(ns) | Client | Type-safe translation access |
useSetLocale() | Client | Instant language switching |
useManifestLanguages() | Client | Dynamic language discovery from CDN |
How It Works
Translations are managed in the better-i18n dashboard and delivered via CDN. The middleware detects the user's locale from the URL, cookie, or browser language. Messages are loaded server-side and passed to the BetterI18nProvider for client components.
Available Locales
These locales are fetched from the CDN at build time using i18n.getLocales() — a server-side API.
Manage locales from the better-i18n dashboard.