Better I18N技術スタック
Next.js
Next.js 15
App Router + Server Components
@better-i18n/next
@better-i18n/next
CDN駆動の翻訳
next-intl
next-intl
型安全な翻訳フック
Tailwind
Tailwind CSS 4
ユーティリティファーストのスタイリング
TypeScript
TypeScript 5
完全な型安全性
CDN翻訳アーキテクチャ
詳細を見るbetter-i18nはCDNファーストのアーキテクチャを採用しています。ダッシュボードで翻訳を公開すると、世界中で50ms未満の配信を実現するCloudflareのグローバルエッジネットワークにデプロイされます。
ダッシュボードからの公開
翻訳はbetter-i18nダッシュボードからCloudflare R2ストレージに公開されます。
エッジCDN配信
翻訳バンドルはグローバルなエッジロケーションから50ms未満の読み込み時間で配信されます。
サーバーサイドレンダリング
Next.jsのサーバーコンポーネントはgetMessages()を通じてリクエスト時に翻訳を取得し、SEOフレンドリーなHTMLを生成します。
クライアントハイドレーション
BetterI18nProviderはレイアウトシフトなしにクライアントサイドで翻訳をハイドレートします。useSetLocale()で即座の切り替えが可能です。
SDKはデフォルトでマニフェストデータを5分間、翻訳メッセージを30秒間キャッシュします。キャッシュの無効化は公開時に自動的に行われます。
このスターターで使用されているSDK API
完全なAPIリファレンス| API | 種別 | 用途 |
|---|---|---|
createI18n() | Config | プロジェクト設定でSDKを初期化 |
i18n.betterMiddleware() | Server | URL、Cookie、Accept-Languageからロケールを検出 |
i18n.getMessages(locale) | Server | ロケールのすべての翻訳を読み込む |
i18n.getLocales() | Server | CDNから利用可能なロケールを取得 |
BetterI18nProvider | Client | 翻訳のためのReactコンテキスト |
useTranslations(ns) | Client | 型安全な翻訳アクセス |
useSetLocale() | Client | 即座の言語切り替え |
useManifestLanguages() | Client | CDNからの動的な言語検出 |
仕組み
翻訳はbetter-i18nダッシュボードで管理され、CDN経由で配信されます。ミドルウェアはURL、Cookie、またはブラウザで設定された言語からユーザーのロケールを検出します。メッセージはサーバーサイドで読み込まれ、クライアントコンポーネント用のBetterI18nProviderに渡されます。
利用可能なロケール
これらのロケールは、サーバーサイドAPIのi18n.getLocales()を使ってビルド時にCDNから取得されます。
ロケールの管理は better-i18nダッシュボード.