Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda
Konten halaman ini diterjemahkan menggunakan AI.
Lihat versi terakhir dari konten aslinya dalam bahasa InggrisJika Anda memiliki ide untuk meningkatkan dokumentasi ini, silakan berkontribusi dengan mengajukan pull request di GitHub.
Tautan GitHub ke dokumentasiSalin Markdown dokumentasi ke clipboard
react-Intl VS react-i18next VS intlayer
Panduan ini membandingkan tiga opsi i18n yang sudah mapan untuk React: react-intl (FormatJS), react-i18next (i18next), dan Intlayer. Kami fokus pada aplikasi React biasa (misalnya, Vite, CRA, SPA). Jika Anda menggunakan Next.js, lihat perbandingan khusus Next.js kami.
Kami mengevaluasi:
- Arsitektur & organisasi konten
- TypeScript & keamanan
- Penanganan terjemahan yang hilang
- Konten kaya & kemampuan pemformatan
- Performa & perilaku pemuatan
- Pengalaman pengembang (DX), alat & pemeliharaan
- SEO/routing (tergantung framework)
ringkasan: Ketiganya dapat melokalkan aplikasi React. Jika Anda menginginkan konten yang terfokus pada komponen, tipe TypeScript yang ketat, pemeriksaan kunci yang hilang saat build-time, kamus yang di-tree-shake, dan alat editorial bawaan (Visual Editor/CMS + terjemahan AI opsional), Intlayer adalah pilihan paling lengkap untuk codebase React modular.
Posisi tingkat tinggi
- react-intl - Format berbasis ICU yang sesuai standar (tanggal/angka/jamak) dengan API yang matang. Katalog biasanya terpusat; keamanan kunci dan validasi saat build-time sebagian besar menjadi tanggung jawab Anda.
- react-i18next - Sangat populer dan fleksibel; mendukung namespace, detektor, dan banyak plugin (ICU, backend). Kuat, tetapi konfigurasi bisa menjadi kompleks seiring skala proyek.
- Intlayer - Model konten yang berfokus pada komponen untuk React, pengetikan TS yang ketat, pemeriksaan saat build-time, tree-shaking, plus Visual Editor/CMS dan terjemahan berbantuan AI. Bekerja dengan React Router, Vite, CRA, dll.
Untuk memahami asal-usul pustaka-pustaka ini, baca sejarah i18n di JavaScript.
Matriks fitur (fokus React)
Buka tabel dalam modal untuk melihat semua isi data dengan jelas
| Fitur | react-intlayer (Intlayer) | react-i18next (i18next) | react-intl (FormatJS) |
|---|---|---|---|
| Terjemahan Dekat Komponen | ✅ Ya, konten ditempatkan bersama dengan setiap komponen | ❌ Tidak | ❌ Tidak |
| Integrasi TypeScript | ✅ Lanjutan, tipe ketat yang dihasilkan secara otomatis | ⚠️ Dasar; konfigurasi tambahan untuk keamanan | ✅ Baik, tetapi kurang ketat |
| Deteksi Terjemahan yang Hilang | ✅ Sorotan error TypeScript dan error/peringatan saat build | ⚠️ Sebagian besar string fallback saat runtime | ⚠️ String fallback |
| Konten Kaya (JSX/Markdown/komponen) | ✅ Dukungan langsung | ⚠️ Terbatas / hanya interpolasi | ⚠️ Sintaks ICU, bukan JSX asli |
| Terjemahan Berbasis AI | ✅ Ya, mendukung beberapa penyedia AI. Dapat digunakan dengan kunci API Anda sendiri. Mempertimbangkan konteks aplikasi dan ruang lingkup konten Anda | ❌ Tidak | ❌ Tidak |
| Editor Visual | ✅ Ya, Editor Visual lokal + CMS opsional; dapat mengeksternalisasi konten codebase; dapat disematkan | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal |
| Routing Lokal | ✅ Ya, mendukung jalur lokal secara langsung (berfungsi dengan Next.js & Vite) | ⚠️ Tidak bawaan, memerlukan plugin (misalnya next-i18next) atau konfigurasi router kustom | ❌ Tidak, hanya pemformatan pesan, routing harus manual |
| Generasi Rute Dinamis | ✅ Ya | ⚠️ Plugin/ekosistem atau pengaturan manual | ❌ Tidak disediakan |
| Pluralisasi | ✅ Pola berbasis enumerasi | ✅ Dapat dikonfigurasi (plugin seperti i18next-icu) | ✅ (ICU) |
| Pemformatan (tanggal, angka, mata uang) | ✅ Formatter yang dioptimalkan (Intl di belakang layar) | ⚠️ Melalui plugin atau penggunaan Intl kustom | ✅ Formatter ICU |
| Format Konten | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP) | ⚠️ .json | ✅ .json, .js |
| Dukungan ICU | ⚠️ Sedang dalam pengerjaan | ⚠️ Melalui plugin (i18next-icu) | ✅ Ya |
| Bantuan SEO (hreflang, sitemap) | ✅ Alat bawaan: bantuan untuk sitemap, robots.txt, metadata | ⚠️ Plugin komunitas/manual | ❌ Bukan inti |
| Ekosistem / Komunitas | ⚠️ Lebih kecil tetapi tumbuh cepat dan responsif | ✅ Terbesar dan matang | ✅ Besar |
| Rendering Sisi Server & Komponen Server | ✅ Ya, dioptimalkan untuk SSR / Komponen Server React | ⚠️ Didukung pada tingkat halaman tetapi perlu melewatkan fungsi t pada pohon komponen untuk komponen server anak | ❌ Tidak didukung, perlu melewatkan fungsi t pada pohon komponen untuk komponen server anak |
| Tree-shaking (memuat hanya konten yang digunakan) | ✅ Ya, per-komponen saat build melalui plugin Babel/SWC | ⚠️ Biasanya memuat semuanya (dapat ditingkatkan dengan namespace/pemisahan kode) | ⚠️ Biasanya memuat semuanya |
| Lazy loading | ✅ Ya, per-locale / per-dictionary | ✅ Ya (misalnya, backends/namespaces sesuai permintaan) | ✅ Ya (memisahkan bundle locale) |
| Purge unused content | ✅ Ya, per-dictionary saat build | ❌ Tidak, hanya melalui segmentasi namespace manual | ❌ Tidak, semua pesan yang dideklarasikan dibundel |
| Manajemen Proyek Besar | ✅ Mendorong modular, cocok untuk design-system | ⚠️ Membutuhkan disiplin file yang baik | ⚠️ Katalog pusat bisa menjadi besar |
Perbandingan Mendalam
1) Arsitektur & skalabilitas
- react-intl / react-i18next: Sebagian besar pengaturan mempertahankan folder locale terpusat per bahasa, kadang dibagi berdasarkan namespace (i18next). Bekerja dengan baik pada awalnya tetapi menjadi area bersama saat aplikasi berkembang.
- Intlayer: Mendorong kamus per-komponen (atau per-fitur) yang berada di lokasi yang sama dengan UI yang mereka layani. Ini menjaga kepemilikan tetap jelas, memudahkan duplikasi/migrasi komponen, dan mengurangi perubahan kunci antar-tim. Konten yang tidak digunakan lebih mudah diidentifikasi dan dihapus.
Mengapa ini penting: Konten modular mencerminkan UI modular. Codebase React yang besar tetap lebih bersih ketika terjemahan berada bersama komponen yang mereka miliki.
2) TypeScript & keamanan
- react-intl: Typing yang solid, tetapi tidak ada pengetikan kunci otomatis; Anda harus menerapkan pola keamanan sendiri.
- react-i18next: Typing yang kuat untuk hooks; pengetikan kunci yang ketat biasanya memerlukan konfigurasi tambahan atau generator.
- Intlayer: Secara otomatis menghasilkan tipe ketat dari konten Anda. Autocomplete IDE dan kesalahan saat kompilasi menangkap kesalahan ketik dan kunci yang hilang sebelum runtime.
Mengapa ini penting: Memindahkan kegagalan ke kiri (ke build/CI) mengurangi masalah produksi dan mempercepat siklus umpan balik pengembang.
3) Penanganan terjemahan yang hilang
- react-intl / react-i18next: Default ke fallback saat runtime (mengulang kunci atau locale default). Anda dapat menambahkan linting/plugin, tetapi tidak dijamin saat build.
- Intlayer: Deteksi saat build dengan peringatan atau kesalahan ketika locale/kunci yang diperlukan hilang.
Mengapa ini penting: CI yang gagal karena string yang hilang mencegah “bahasa Inggris misterius” bocor ke UI non-Inggris.
4) Konten kaya & pemformatan
- react-intl: Dukungan ICU yang sangat baik untuk plural, select, tanggal/angka, dan komposisi pesan. JSX dapat digunakan, tetapi model mental tetap berfokus pada pesan.
- react-i18next: Interpolasi yang fleksibel dan
<Trans>untuk menyisipkan elemen/komponen; ICU tersedia melalui plugin. - Intlayer: File konten dapat menyertakan node kaya (JSX/Markdown/komponen) dan metadata. Pemformatan menggunakan Intl di belakang layar; pola plural sangat ergonomis.
Mengapa ini penting: Teks UI yang kompleks (tautan, bagian tebal, komponen inline) menjadi lebih mudah ketika pustaka menerima node React dengan bersih.
5) Performa & perilaku pemuatan
- react-intl / react-i18next: Anda biasanya mengelola pemisahan katalog dan lazy loading secara manual (namespace/impor dinamis). Efektif tetapi memerlukan disiplin.
- Intlayer: Menghilangkan kamus yang tidak digunakan dan mendukung lazy loading per-kamus/per-locale secara langsung.
Mengapa ini penting: Bundel yang lebih kecil dan string yang tidak terpakai lebih sedikit meningkatkan performa saat startup dan navigasi.
Grafik di bawah memperkirakan ukuran konten untuk aplikasi teoretis dengan 1 hingga 10 halaman yang diterjemahkan ke 1 hingga 10 bahasa, dengan sekitar 30 KB teks per halaman. Memuat konten secara dinamis per locale menghilangkan sumbu bahasa, membatasi konten per komponen atau per rute menghilangkan sumbu halaman, dan hanya kombinasi keduanya yang menjaga ukuran tetap datar.
Hasil benchmark di React (TanStack Start / Vite)
Angka dari Benchmark Bloom yang mengukur implementasi React standar di TanStack Start:
Metrik
Pemuatan JSON dinamis
Memuat terjemahan secara lambat saat runtime
JSON cakupan (namespacing)
Namespace terjemahan per halaman
Apa metrik ini?
Total ukuran kompresi gzip dari bundel pustaka internasionalisasi. Ini hanya mencakup penyedia dan logika pengambilan konten setelah tree-shaking dan minifikasi.
Mengapa ini penting?
Ukuran pustaka yang lebih kecil mengurangi muatan JavaScript awal, yang mengarah pada waktu unduh dan eksekusi yang lebih cepat pada klien.
Lihat sebagai
Buka tabel dalam modal untuk melihat semua isi data dengan jelas
| Library | Strategy | Lib size (gz) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity | Hydration |
|---|---|---|---|---|---|---|---|---|
| base (no i18n) | - | 0.0 KB | 111.0 KB | 0.0% | 0.0% | 0.7 KB | 8.1 ms | 21.6 ms |
react-i18next | dynamic | 18.4 KB | 136.4 KB | 23.1% | 89.8% | 24.8 KB | 123.1 ms | 32.9 ms |
intlayer | dynamic | 5.0 KB | 118.6 KB | 0.0% | 0.0% | 6.3 KB | 3.6 ms | 14.1 ms |
Tabel lengkap ada di laporan benchmark TanStack Start dan Ikhtisar Benchmark i18n.
6) DX, tooling & maintenance
- react-intl / react-i18next: Ekosistem komunitas yang luas; untuk alur kerja editorial Anda biasanya mengadopsi platform lokalisasi eksternal.
- Intlayer: Menyediakan Visual Editor gratis dan CMS opsional (simpan konten di Git atau eksternalkan). Juga menawarkan ekstensi VSCode untuk pembuatan konten dan terjemahan berbantuan AI menggunakan kunci penyedia Anda sendiri.
Mengapa ini penting: Alat bawaan memperpendek siklus antara pengembang dan penulis konten - lebih sedikit kode penghubung, lebih sedikit ketergantungan vendor.
Kapan memilih yang mana?
- Pilih react-intl jika Anda menginginkan format pesan ICU-first dengan API yang sederhana dan sesuai standar serta tim Anda nyaman mengelola katalog dan pemeriksaan keamanan secara manual.
- Pilih react-i18next jika Anda membutuhkan ekosistem luas i18next (detektor, backend, plugin ICU, integrasi) dan menerima konfigurasi lebih untuk mendapatkan fleksibilitas.
- Pilih Intlayer jika Anda menghargai konten yang dibatasi pada komponen, TypeScript yang ketat, jaminan saat build, tree-shaking, dan alat editorial batterai-termasuk - terutama untuk aplikasi React besar dan modular, sistem desain, dll.
Interoperabilitas dengan react-intl dan react-i18next
intlayer juga dapat membantu mengelola namespace react-intl dan react-i18next Anda.
Dengan menggunakan intlayer, Anda dapat mendeklarasikan konten Anda dalam format perpustakaan i18n favorit Anda, dan intlayer akan menghasilkan namespace Anda di lokasi pilihan Anda (contoh: /messages/{{locale}}/{{namespace}}.json).
Bacaan lanjutan & benchmark
Laporan benchmark:
BINTANG GitHub
Bintang GitHub adalah indikator kuat dari popularitas proyek, kepercayaan komunitas, dan relevansi jangka panjang. Meskipun bukan ukuran langsung dari kualitas teknis, bintang mencerminkan berapa banyak pengembang yang menganggap proyek tersebut berguna, mengikuti perkembangannya, dan kemungkinan akan mengadopsinya. Untuk memperkirakan nilai sebuah proyek, bintang membantu membandingkan daya tarik di antara alternatif dan memberikan wawasan tentang pertumbuhan ekosistem.
Aktivitas commit
Bintang menunjukkan popularitas. Commit menunjukkan seberapa banyak kerja yang masuk ke sebuah proyek. Saat tulisan ini dibuat, Intlayer memiliki sekitar 7.500 commit, lebih banyak dari sebagian besar library yang dibandingkan di sini, dan sekitar 5 kali lebih banyak dari next-intl atau next-i18next.
- formatjs/formatjs
- i18next/react-i18next
- aymericzip/intlayer
Commit pada branch default, sumber: GitHub API.
Intlayer adalah monorepo, jadi jumlah ini mencakup setiap paket framework, CLI, dan dokumentasi. Baca commit sebagai sinyal aktivitas, bukan kualitas.
Unduhan npm
- react-i18next
- react-intl
- react-intlayer
Sumber: API unduhan registri npm.
Jumlah unduhan menghargai solusi yang paling lama, bukan yang terbaik. Library yang dirilis bertahun-tahun lalu masih diinstal oleh setiap proyek yang memilihnya saat itu, oleh setiap eksekusi CI, dan oleh setiap paket yang bergantung padanya. Angka ini lebih mengukur inersia daripada pilihan baru.
Asisten AI memperkuat efek ini. next-intl, i18next, dan vue-i18n ada di mana-mana dalam kode yang menjadi data latih mereka, sehingga mereka menyarankannya secara default tanpa membandingkan alternatif. Setiap saran menambah unduhan, yang kemudian mendorong saran berikutnya. Bandingkan berdasarkan benchmark, bukan jumlah unduhan.
Kesimpulan
Ketiga pustaka tersebut secara efektif melakukan lokalisasi React. Pembeda utamanya adalah seberapa banyak infrastruktur yang harus Anda bangun untuk mencapai pengaturan yang aman dan dapat diskalakan:
- Dengan Intlayer, konten modular, pengetikan TS yang ketat, keamanan saat build, bundle yang di-tree-shake, dan alat editorial adalah default - bukan tugas yang merepotkan.
- Jika tim Anda mengutamakan pemeliharaan dan kecepatan dalam aplikasi React multi-locale yang berbasis komponen, Intlayer menawarkan alur kerja pengembang dan konten yang paling lengkap saat ini.
Lihat dokumen 'Mengapa Intlayer?' untuk detail lebih lanjut.
Komentar
Belum ada komentar. Jadilah yang pertama membagikan pemikiran Anda.