Better I18NBu Starter Hakkında
Bu, çok dilli uygulamalar oluşturmak için better-i18n'in Next.js App Router ile nasıl kullanılacağını gösteren bir başlangıç şablonudur.
Teknoloji Altyapısı
Next.js 15
App Router + Server Components
@better-i18n/next
CDN destekli çeviriler
next-intl
Tip güvenli çeviri hook'ları
Tailwind CSS 4
Utility-first stil
TypeScript 5
Tam tip güvenliği
CDN Çeviri Mimarisi
Daha fazla bilgibetter-i18n, CDN öncelikli bir mimari kullanır. Dashboard'da çevirileri yayınladığında, dünya genelinde 50 ms altı teslimat için Cloudflare'in küresel edge ağına dağıtılır.
Dashboard'da yayınlama
Çeviriler better-i18n dashboard'undan Cloudflare R2 depolama alanına yayınlanır.
Edge CDN dağıtımı
Çeviri paketleri, 50 ms altı yükleme süreleriyle küresel edge konumlarından sunulur.
Sunucu tarafında render
Next.js sunucu bileşenleri, SEO dostu HTML için istek anında getMessages() aracılığıyla çevirileri getirir.
İstemci Tarafı Hidrasyon
BetterI18nProvider, çevirileri istemci tarafında sıfır düzen kayması ile hidrate eder. useSetLocale() anında dil değiştirmeyi sağlar.
SDK, manifest verilerini varsayılan olarak 5 dakika, çeviri mesajlarını ise 30 saniye önbelleğe alır. Yayınlamada önbellek otomatik olarak geçersiz kılınır.
Bu Starter'da Kullanılan SDK API'leri
Tam API referansı| API | Tür | Amaç |
|---|---|---|
createI18n() | Config | SDK'yı proje ayarlarıyla başlat |
i18n.betterMiddleware() | Server | URL, çerez veya Accept-Language başlığından dil algılama |
i18n.getMessages(locale) | Server | Bir dil için tüm çevirileri yükle |
i18n.getLocales() | Server | CDN'den mevcut dilleri getir |
BetterI18nProvider | Client | Çeviriler için React bağlamı |
useTranslations(ns) | Client | Tip güvenli çeviri erişimi |
useSetLocale() | Client | Anlık dil değiştirme |
useManifestLanguages() | Client | CDN'den dinamik dil keşfi |
Nasıl Çalışır
Çeviriler better-i18n dashboard'unda yönetilir ve CDN üzerinden dağıtılır. Middleware, kullanıcının dilini URL, çerez veya tarayıcı dilinden algılar. Mesajlar sunucu tarafında yüklenir ve istemci bileşenler için BetterI18nProvider'a aktarılır.
Mevcut Diller
Bu diller, i18n.getLocales() sunucu tarafı API'si kullanılarak CDN'den build zamanında alınır.
Dilleri buradan yönet: better-i18n dashboard.