Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda
Dengan mengintegrasikan Intlayer MCP Server ke AI assistant favorit Anda, Anda dapat mengambil seluruh dokumentasi langsung dari ChatGPT, DeepSeek, Cursor, VSCode, dll.
Lihat dokumentasi MCP ServerKonten 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 | Internasionalisasi React (i18n)
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.
Matriks fitur (fokus React)
| 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.
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).
Lihat opsi dictionaryOutput dan i18nextResourcesDir untuk detail lebih lanjut.
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.
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.