React i18n 变得简单
具有 Hooks、Context 和无缝 CDN 交付的 React 应用程序的安全国际化类型。
Setup
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intlWrap your app with BetterI18nProvider
Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.
import { BetterI18nProvider } from '@better-i18n/use-intl';
function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<YourApp />
</BetterI18nProvider>
);
}Use translations
Call useTranslations() in any component to access your translation keys with full TypeScript support.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return <h1>{t('welcome')}</h1>;
}Capabilities
功能
用 Better I18N 在几分钟内为你的 React 应用完成上手。
React 挂钩 API（useTranslations）
完整的 TypeScript 支持，带自动补全
懒加载以获得最佳包体积
支持复数的 ICU 消息格式
变量插值与格式化
用于区域设置管理的 React Context
支持 SSR 与 SSG
开发期间热重载
DevTools 集成
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('greeting', { name: 'World' })}</p>
</div>
);
}Provider fetches from the CDN once
Every component reads from context
60s in-memory cache, offline fallback
Keys typed from your project
Ecosystem
兼容流行的 React i18n 库
Better I18N 不是你喜爱的 i18n 库的替代品——它是让这些库更强大的翻译管理层。
react-intl
最流行的 React i18n 库，支持 ICU 消息格式。被数千个生产应用使用。
Better I18N 将翻译直接同步为 react-intl JSON 格式。在仪表盘编辑，即时在应用中查看更改。
react-i18next
基于 i18next 的强大 React i18n 框架。内置命名空间、插值和复数等功能。
导出为带命名空间的 i18next 兼容 JSON。Better I18N 处理翻译流程，i18next 处理运行时。
FormatJS
一套国际化库集合，包含 react-intl。支持 ICU 消息语法和 CLDR 数据。
Better I18N 原生支持 ICU 消息格式。可视化管理复杂的复数和选择语法，导出为 FormatJS 格式。
Lingui
一个可读性强、自动化且优化的 i18n 库。基于宏的消息提取带来出色的开发体验。
使用 Lingui CLI 提取消息，在 Better I18N 中管理翻译，通过 GitHub 集成自动同步。
Keep reading
相关内容
Related Articles
How to Add i18n to Shopify Hydrogen (Complete Guide)
Shopify Hydrogen is the modern way to build custom storefronts — but adding internationalization (i18n) can be challenging. You need locale-aware routing,...
Read More →Django i18n with AI Translation: Complete Setup Guide
Django i18n with AI Translation: Complete Setup Guide Django ships with a mature internationalization (i18n) framework built on GNU gettext. When you...
Read More →Introducing the Better i18n CLI: Manage Translations from Your Terminal
Until now, managing translation keys on Better i18n meant using the dashboard UI or connecting an MCP server to your AI assistant. Both work great — but...
Read More →探索其他框架的 i18n 方案
“我们的目标是：在中国建立一个新的世界遗产。该技术的应用领域非常广泛！”
Samet Selcuk
创始人，Hellospace