React i18n をシンプルに
Hooks、Context、シームレスな CDN 配信を備えた、React 向け型安全な国際化。
Get started in 3 steps
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intl
Wrap 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>;
}機能
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
# 1. Install
npm install @better-i18n/use-intl
# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'
function App() {
return (
<BetterI18nProvider project="org/project" locale="en">
<YourApp />
</BetterI18nProvider>
)
}
# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'
function MyComponent() {
const t = useTranslations('common')
return <h1>{t('welcome')}</h1>
}人気の React i18n ライブラリと連携
Better i18n はお気に入りの i18n ライブラリの置き換えではありません。翻訳管理レイヤーとして、それらをさらに強力にします。
Better i18n + react-intl
ICU メッセージ形式に対応した最も人気の React i18n ライブラリ。数多くの本番アプリで利用されています。
Better i18n が翻訳を react-intl の JSON 形式へ直接同期。ダッシュボードで編集し、アプリに即時反映されます。
Better i18n + react-i18next
i18next をベースにした React 向けの強力な i18n フレームワーク。名前空間、補間、複数形などを標準搭載。
名前空間付きで i18next 互換の JSON にエクスポート。Better i18n が翻訳ワークフローを、i18next がランタイムを担います。
Better i18n + FormatJS
react-intl を含む国際化ライブラリ群。ICU メッセージ構文と CLDR データに対応。
Better i18n は ICU メッセージ形式をネイティブでサポートします。複雑な複数形や select をビジュアルに管理し、FormatJS 形式へエクスポートできます。
Better i18n + Lingui
読みやすく、自動化され、最適化された i18n ライブラリ。マクロベースのメッセージ抽出で優れた DX。
Lingui CLI でメッセージを抽出し、Better i18n で翻訳を管理。GitHub 連携で自動的に同期します。
クイックスタート
React アプリで Better i18n を数分で始められます。
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>
);
}Related Articles
Django i18n と AI翻訳：完全セットアップガイド
Django i18n と AI翻訳：完全セットアップガイド Django には GNU gettext をベースにした成熟した国際化（i18n）フレームワークが付属しています。この基盤を AI...
Read more →デベロッパーエクスペリエンス深掘り：Better i18nのプラットフォームUXがローカライゼーションを高速かつ直感的にする方法
ローカライゼーションプラットフォームは、ぎこちないインターフェース、遅いエディター、委員会が設計したかのようなワークフローで知られています。私たちはBetter i18nを異なる哲学で構築しました：すべてのインタラクションは意図的で、高速で、開発者の時間を尊重するものであるべきです。...
Read more →Unsplashインテグレーションによるメディア管理：完全CMSガイド
ほとんどのi18nツールでは、翻訳と並行したメディア管理は常に後回しにされてきました。テキストを翻訳し、その後に別のシステムで画像を手動で処理する——ダウンロード、再アップロード、リンク設定。Better i18nは異なるアプローチを採用しています。メディアはコンテンツワークフローにおいて第一級市民です。...
Read more →