React i18n: Mudah dan Ringkas
Internationalisasi jenis-selamat untuk aplikasi React dengan hook, konteks, dan penghantaran CDN yang lancar.
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>;
}Ciri-ciri
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>
}Bekerja dengan Pustaka i18n React Popular
Better I18N bukan pengganti perpustakaan i18n kegemaran anda – ia adalah lapisan pengurusan terjemahan yang menjadikannya lebih berkuasa.
Better I18N + react-intl
Pustaka React i18n paling popular dengan sokongan format mesej ICU. Digunakan oleh beribu-ribu aplikasi produksi.
Better I18N menyegerakkan terjemahan anda terus ke format JSON React-Intl. Sunting di papan pemuka kami, lihat perubahan pada aplikasi anda dengan segera.
Better I18N + react-i18next
Rangka kerja i18n berkuasa untuk React berasaskan i18next. Ciri-ciri seperti ruang nama, interpolasi, dan kata jamak terbina dalam.
Eksport ke JSON yang serasi dengan i18next dengan ruang nama. i18n yang lebih baik mengendalikan aliran kerja terjemahan, i18next mengendalikan runtime.
Better I18N + FormatJS
Satu set perpustakaan untuk pengantarabangsaan yang merangkumi react-intl. Menyokong sintaksis Mesej ICU dan data CLDR.
i18n yang lebih baik menyokong format mesej ICU secara asli. Urus bentuk kata jamak kompleks dan pilihan secara visual, eksport ke format FormatJS.
Better I18N + Lingui
Pustaka i18n yang mudah dibaca, automatik, dan dioptimumkan. DX hebat dengan pengekstrakan mesej berasaskan makro.
Ekstrak mesej dengan Lingui CLI, urus terjemahan dalam Better I18N, selaras semula secara automatik melalui integrasi GitHub.
Permulaan Cepat
Mulakan dengan Better I18N dalam aplikasi React anda dalam beberapa minit.
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 →Mulakan Pembinaan dengan React i18n
Tahap percuma tersedia. Tiada kad kredit diperlukan.