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
機能
React アプリで Better I18N を数分で始められます。
React Hooks 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
ICU メッセージ形式に対応した最も人気の React i18n ライブラリ。数多くの本番アプリで利用されています。
Better I18N が翻訳を react-intl の JSON 形式へ直接同期。ダッシュボードで編集し、アプリに即時反映されます。
react-i18next
i18next をベースにした React 向けの強力な i18n フレームワーク。名前空間、補間、複数形などを標準搭載。
名前空間付きで i18next 互換の JSON にエクスポート。Better I18N が翻訳ワークフローを、i18next がランタイムを担います。
FormatJS
react-intl を含む国際化ライブラリ群。ICU メッセージ構文と CLDR データに対応。
Better I18N は ICU メッセージ形式をネイティブでサポートします。複雑な複数形や select をビジュアルに管理し、FormatJS 形式へエクスポートできます。
Lingui
読みやすく、自動化され、最適化された i18n ライブラリ。マクロベースのメッセージ抽出で優れた DX。
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 →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 →Django i18n と AI翻訳：完全セットアップガイド
Django i18n と AI翻訳：完全セットアップガイド Django には GNU gettext をベースにした成熟した国際化（i18n）フレームワークが付属しています。この基盤を AI...
Read More →他のフレームワーク向け i18n を見る
“このサイトでは、あなたのビジネスライフに役立つ情報をお届けします。私たちは、このような、より良いサービスを提供しています！”
Samet Selcuk
創業者（Hellospace）