React i18n הפך לפשוט
בינלאומיות בטוחה מבחינה טיפוסית עבור יישומי React עם hooks, context ואספקה חלקה באמצעות CDN.
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
ספריית React i18n הפופולרית ביותר עם תמיכה בפורמט הודעות ICU. בשימוש על ידי אלפי אפליקציות ייצור.
Better I18N מסנכרן את התרגומים שלך ישירות לפורמט JSON של react-intl. ערוך בלוח המחוונים שלנו, וראה את השינויים באפליקציה שלך באופן מיידי.
Better I18N + react-i18next
מסגרת i18n עוצמתית עבור React המבוססת על i18next. כוללת תכונות מובנות כגון מרחבי שמות, אינטרפולציה וצורות רבים.
ייצא ל-JSON תואם i18next עם מרחבי שמות. Better I18N מטפל בתהליך התרגום, i18next מטפל בזמן הריצה.
Better I18N + FormatJS
סט ספריות לבינלאומיות הכולל react-intl. תומך בתחביר הודעות ICU ובנתוני CLDR.
Better I18N תומך באופן מובנה בפורמט הודעות ICU. נהל צורות רבים מורכבות ובחירות באופן חזותי, ייצא לפורמט FormatJS.
Better I18N + Lingui
ספריית i18n קריאה, אוטומטית ומותאמת. חווית מפתחים נהדרת עם חילוץ הודעות מבוסס מאקרו.
חלץ הודעות באמצעות Lingui CLI, נהל תרגומים ב-Better I18N, סנכרן בחזרה באופן אוטומטי באמצעות שילוב GitHub.
התחלה מהירה
התחל להשתמש ב-Better I18N באפליקציית React שלך תוך דקות ספורות.
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
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 →