React i18n yang Sederhana
Internasionalisasi type-safe untuk aplikasi React dengan hooks, context, dan pengiriman CDN yang mulus.
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>;
}Fitur
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 Library i18n React Populer
Better I18N bukan pengganti library i18n favorit Anda—ini adalah lapisan manajemen terjemahan yang membuatnya semakin powerful.
Better I18N + react-intl
Library i18n React paling populer dengan dukungan format pesan ICU. Digunakan oleh ribuan aplikasi produksi.
Better I18N menyinkronkan terjemahan Anda langsung ke format JSON react-intl. Edit di dashboard kami, lihat perubahan di aplikasi Anda secara instan.
Better I18N + react-i18next
Framework i18n yang kuat untuk React berbasis i18next. Fitur seperti namespace, interpolasi, dan plural sudah tersedia.
Ekspor ke JSON kompatibel i18next dengan namespace. Better I18N mengelola workflow terjemahan, i18next menangani runtime.
Better I18N + FormatJS
Sekumpulan library internasionalisasi yang mencakup react-intl. Mendukung sintaks ICU Message dan data CLDR.
Better I18N mendukung format pesan ICU secara native. Kelola plural dan select yang kompleks secara visual, lalu ekspor ke format FormatJS.
Better I18N + Lingui
Library i18n yang mudah dibaca, otomatis, dan dioptimalkan. DX yang bagus dengan ekstraksi pesan berbasis macro.
Ekstrak pesan dengan Lingui CLI, kelola terjemahan di Better I18N, lalu sinkronkan kembali secara otomatis lewat integrasi GitHub.
Mulai Cepat
Mulai menggunakan Better I18N di aplikasi React Anda dalam hitungan menit.
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 →Mulai Membangun dengan i18n React
Tersedia paket gratis. Tidak perlu kartu kredit.