Better I18N技术栈
Next.js
Next.js 15
App Router + Server Components
@better-i18n/next
@better-i18n/next
CDN 驱动的翻译
next-intl
next-intl
类型安全的翻译 Hook
Tailwind
Tailwind CSS 4
实用优先样式
TypeScript
TypeScript 5
完全的类型安全性
CDN 翻译架构
了解更多better-i18n 采用 CDN 优先架构。在控制台发布翻译后，将部署到 Cloudflare 全球边缘网络，实现全球 50ms 以内的传输。
控制台发布
翻译从 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 控制台.