Ajukan pertanyaan Anda dan dapatkan ringkasan dokumen dengan merujuk halaman ini dan penyedia AI pilihan Anda
Riwayat Versi
- "Rilis Kompiler"v7.3.127/11/2025
- "Pembaruan tabel komparatif"v5.8.019/8/2025
- "Riwayat awal"v5.5.1029/6/2025
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
Mengapa Anda harus mempertimbangkan Intlayer?
Apa itu Intlayer?
Intlayer adalah pustaka internasionalisasi yang dirancang khusus untuk pengembang JavaScript. Ini memungkinkan deklarasi konten Anda di mana saja dalam kode Anda. Ini mengubah deklarasi konten multibahasa menjadi kamus terstruktur untuk diintegrasikan dengan mudah dalam kode Anda. Menggunakan TypeScript, Intlayer membuat pengembangan Anda lebih kuat dan efisien.
Mengapa Intlayer dibuat?
Intlayer dibuat untuk memecahkan masalah umum yang memengaruhi semua pustaka i18n umum seperti next-intl, react-i18next, react-intl, next-i18next, react-intl, dan vue-i18n.
Semua solusi ini mengadopsi pendekatan terpusat untuk mendaftarkan dan mengelola konten Anda. Misalnya:
Salin kode ke clipboard
.├── locales│ ├── en.json│ ├── es.json│ └── fr.json├── i18n.ts└── src └── components └── MyComponent └── index.tsxAtau di sini menggunakan namespace:
Salin kode ke clipboard
.├── locales│ ├── en│ │ ├── footer.json│ │ └── navbar.json│ ├── fr│ │ ├── footer.json│ │ └── navbar.json│ └── es│ ├── footer.json│ └── navbar.json├── i18n.ts└── src └── components └── MyComponent └── index.tsxJenis arsitektur ini memperlambat proses pengembangan dan membuat basis kode lebih kompleks untuk dipelihara karena beberapa alasan:
Untuk setiap komponen baru yang dibuat, Anda harus:
- Membuat sumber daya/namespace baru di folder
locales - Ingat untuk mengimpor namespace baru di halaman Anda
- Menerjemahkan konten Anda (seringkali dilakukan secara manual dengan salin/tempel dari penyedia AI)
- Membuat sumber daya/namespace baru di folder
Untuk setiap perubahan yang dilakukan pada komponen Anda, Anda harus:
- Mencari sumber daya/namespace terkait (jauh dari komponen)
- Menerjemahkan konten Anda
- Memastikan konten Anda mutakhir untuk setiap lokal
- Memverifikasi namespace Anda tidak menyertakan kunci/nilai yang tidak digunakan
- Memastikan struktur file JSON Anda sama untuk semua lokal
Pada proyek profesional yang menggunakan solusi ini, platform lokalisasi sering digunakan untuk membantu mengelola terjemahan konten Anda. Namun, ini dapat dengan cepat menjadi mahal untuk proyek besar.
Untuk memecahkan masalah ini, Intlayer mengadopsi pendekatan yang melingkupi konten Anda per komponen dan menjaga konten Anda tetap dekat dengan komponen Anda, seperti yang sering kita lakukan dengan CSS (styled-components), tipe, dokumentasi (storybook), atau pengujian unit (jest).
Salin kode ke clipboard
.└── components └── MyComponent ├── index.content.ts ├── index.test.tsx ├── index.stories.tsx └── index.tsxSalin kode ke clipboard
import { t, type Dictionary } from "intlayer";
const componentExampleContent = {
key: "component-example",
content: {
myTranslatedContent: t({
en: "Hello World",
es: "Hola Mundo",
fr: "Bonjour le monde",
}),
},
} satisfies Dictionary;
export default componentExampleContent;Salin kode ke clipboard
import { useIntlayer } from "react-intlayer";
export const ComponentExample = () => {
const { myTranslatedContent } = useIntlayer("component-example");
return <span>{myTranslatedContent}</span>;
};Pendekatan ini memungkinkan Anda untuk:
Meningkatkan kecepatan pengembangan
- File
.content.{{ts|mjs|cjs|json}}dapat dibuat menggunakan ekstensi VSCode - Alat AI penyelesaian otomatis di IDE Anda (seperti GitHub Copilot) dapat membantu Anda mendeklarasikan konten Anda, mengurangi salin/tempel
- File
Membersihkan basis kode Anda
- Mengurangi kompleksitas
- Meningkatkan pemeliharaan
Menduplikasi komponen Anda dan konten terkaitnya dengan lebih mudah (Contoh: komponen login/register, dll.)
- Dengan membatasi risiko memengaruhi konten komponen lain
- Dengan menyalin/menempel konten Anda dari satu aplikasi ke aplikasi lain tanpa dependensi eksternal
Menghindari pengotoran basis kode Anda dengan kunci/nilai yang tidak digunakan untuk komponen yang tidak digunakan
- Jika Anda tidak menggunakan komponen, Intlayer tidak akan mengimpor konten terkaitnya
- Jika Anda menghapus komponen, Anda akan lebih mudah mengingat untuk menghapus konten terkaitnya karena akan ada di folder yang sama
Mengurangi biaya penalaran bagi agen AI untuk mendeklarasikan konten multibahasa Anda
- Agen AI tidak perlu memindai seluruh basis kode Anda untuk mengetahui di mana harus mengimplementasikan konten Anda
- Terjemahan dapat dengan mudah dilakukan oleh alat AI penyelesaian otomatis di IDE Anda (seperti GitHub Copilot)
Mengoptimalkan performa pemuatan
- Jika sebuah komponen dimuat secara malas (lazy-loaded), konten terkaitnya akan dimuat pada saat yang sama
Fitur tambahan Intlayer
Buka tabel dalam modal untuk melihat semua isi data dengan jelas
| Fitur | Deskripsi |
|---|---|
 | Dukungan Lintas-Kerangka Kerja Intlayer kompatibel dengan semua kerangka kerja dan pustaka utama, termasuk Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, dan banyak lagi. |
 | Manajemen Konten Berbasis JavaScript Manfaatkan fleksibilitas JavaScript untuk mendefinisikan dan mengelola konten Anda secara efisien. - Deklarasi konten |
 | Kompiler Kompiler Intlayer mengekstrak konten secara otomatis dari komponen dan menghasilkan file kamus. - Kompiler |
 | File Deklarasi Konten Per-Lokal Percepat pengembangan Anda dengan mendeklarasikan konten Anda sekali, sebelum pembuatan otomatis. - File Deklarasi Konten Per-Lokal |
 | Lingkungan Type-Safe Manfaatkan TypeScript untuk memastikan definisi konten dan kode Anda bebas dari kesalahan, sambil juga mendapatkan keuntungan dari penyelesaian otomatis IDE. - Konfigurasi TypeScript |
 | Setup yang Disederhanakan Mulai dan jalankan dengan cepat dengan konfigurasi minimal. Sesuaikan pengaturan untuk internasionalisasi, perutean, AI, build, dan penanganan konten dengan mudah. - Jelajahi integrasi Next.js |
 | Pengambilan Konten yang Disederhanakan Tidak perlu memanggil fungsi t Anda untuk setiap bagian konten. Ambil semua konten Anda secara langsung menggunakan satu hook.- Integrasi React |
 | Implementasi Komponen Server yang Konsisten Sangat cocok untuk komponen server Next.js, gunakan implementasi yang sama untuk komponen klien dan server, tidak perlu meneruskan fungsi t Anda melalui setiap komponen server. - Komponen Server |
 | Basis Kode yang Terorganisir Jaga basis kode Anda lebih terorganisir: 1 komponen = 1 kamus di folder yang sama. Terjemahan yang dekat dengan komponen masing-masing meningkatkan pemeliharaan dan kejelasan. - Cara kerja Intlayer |
 | Perutean yang Ditingkatkan Dukungan penuh perutean aplikasi, beradaptasi dengan mulus ke struktur aplikasi yang kompleks, untuk Next.js, React, Vite, Vue.js, dll. - Jelajahi integrasi Next.js |
 | Dukungan Markdown Impor dan interpretasikan file lokal dan Markdown jarak jauh untuk konten multibahasa seperti kebijakan privasi, dokumentasi, dll. Interpretasikan dan buat metadata Markdown dapat diakses dalam kode Anda. - File konten |
 | Editor Visual & CMS Gratis Editor visual dan CMS gratis tersedia untuk penulis konten, menghilangkan kebutuhan akan platform lokalisasi. Jaga konten Anda tetap sinkron menggunakan Git, atau eksternalisasikan secara total atau sebagian dengan CMS. - Editor Intlayer - CMS Intlayer |
 | Konten Tree-shakable Konten tree-shakable, mengurangi ukuran bundel akhir. Memuat konten per komponen, tidak termasuk konten yang tidak digunakan dari bundel Anda. Mendukung pemuatan malas (lazy loading) untuk meningkatkan efisiensi pemuatan aplikasi. - Optimasi build aplikasi |
 | Rendering Statis Tidak memblokir Rendering Statis. - Integrasi Next.js |
 | Terjemahan Berbasis AI Ubah situs web Anda ke dalam 231 bahasa hanya dengan satu klik menggunakan alat terjemahan bertenaga AI canggih dari Intlayer dengan penyedia AI/kunci API Anda sendiri. - Integrasi CI/CD - CLI Intlayer - Isi otomatis |
 | Integrasi Server MCP Menyediakan server MCP (Model Context Protocol) untuk otomatisasi IDE, memungkinkan manajemen konten dan alur kerja i18n yang lancar langsung di dalam lingkungan pengembangan Anda. - Server MCP |
 | Ekstensi VSCode Intlayer menyediakan ekstensi VSCode untuk membantu Anda mengelola konten dan terjemahan, membangun kamus, menerjemahkan konten, dan banyak lagi. - Ekstensi VSCode |
 | Interoperabilitas Memungkinkan interoperabilitas dengan react-i18next, next-i18next, next-intl, dan react-intl. - Intlayer dan react-intl - Intlayer dan next-intl - Intlayer dan next-i18next |
| Menguji Terjemahan yang Hilang (CLI/CI) | ✅ CLI: npx intlayer content test (audit ramah CI) |
Perbandingan Intlayer dengan solusi lain
Buka tabel dalam modal untuk melihat semua isi data dengan jelas
| Fitur | intlayer | react-i18next | react-intl (FormatJS) | lingui | next-intl | next-i18next | vue-i18n |
|---|---|---|---|---|---|---|---|
| Terjemahan Dekat Komponen | ✅ Ya, konten diletakkan bersama dengan setiap komponen | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ Tidak | ✅ Ya - menggunakan Single File Components (SFCs) |
| Integrasi TypeScript | ✅ Lanjutan, tipe ketat yang dihasilkan secara otomatis | ⚠️ Dasar; perlu konfigurasi ekstra untuk keamanan | ✅ Bagus, tapi kurang ketat | ⚠️ Tipifikasi, perlu konfigurasi | ✅ Bagus | ⚠️ Dasar | ✅ Bagus (tipe tersedia; keamanan kunci perlu pengaturan) |
| Deteksi Terjemahan yang Hilang | ✅ Penyorotan kesalahan TypeScript dan kesalahan/peringatan waktu build | ⚠️ Sebagian besar string fallback saat runtime | ⚠️ String fallback | ⚠️ Perlu konfigurasi ekstra | ⚠️ Runtime fallback | ⚠️ Runtime fallback | ⚠️ Runtime fallback/peringatan (dapat dikonfigurasi) |
| Konten Kaya (JSX/Markdown/komponen) | ✅ Dukungan langsung | ⚠️ Terbatas / hanya interpolasi | ⚠️ Sintaks ICU, bukan JSX asli | ⚠️ Terbatas | ❌ Tidak dirancang untuk node kaya | ⚠️ Terbatas | ⚠️ Terbatas (komponen melalui <i18n-t>, Markdown melalui plugin) |
| Terjemahan Berbasis AI | ✅ Ya, mendukung beberapa penyedia AI. Dapat digunakan dengan kunci API Anda sendiri. Mempertimbangkan konteks aplikasi dan cakupan konten | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ Tidak |
| Editor Visual | ✅ Ya, Editor Visual lokal + CMS opsional; dapat mengeksternalisasi konten basis kode; dapat disematkan | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal |
| Perutean Terlokalisasi | ✅ Ya, mendukung jalur terlokalisasi secara langsung (berfungsi dengan Next.js & Vite) | ⚠️ Tidak bawaan, memerlukan plugin (misal: next-i18next) atau konfigurasi router kustom | ❌ Tidak, hanya pemformatan pesan, perutean harus manual | ⚠️ Tidak bawaan, memerlukan plugin atau konfigurasi manual | ✅ Bawaan, App Router mendukung segmen [locale] | ✅ Bawaan | ✅ Bawaan |
| Pembuatan Rute Dinamis | ✅ Ya | ⚠️ Plugin/ekosistem atau pengaturan manual | ❌ Tidak disediakan | ⚠️ Plugin/manual | ✅ Ya | ✅ Ya | ❌ Tidak disediakan (Nuxt i18n menyediakan) |
| Pluralisasi | ✅ Pola berbasis enumerasi | ✅ Dapat dikonfigurasi (plugin seperti i18next-icu) | ✅ (ICU) | ✅ (ICU/messageformat) | ✅ Bagus | ✅ Bagus | ✅ Aturan plural bawaan |
| Pemformatan (tanggal, angka, mata uang) | ✅ Pemformat yang dioptimalkan (Intl di balik layar) | ⚠️ Melalui plugin atau penggunaan Intl kustom | ✅ Pemformat ICU | ✅ Helper ICU/CLI | ✅ Bagus (Intl helper) | ✅ Bagus (Intl helper) | ✅ Pemformat tanggal/angka bawaan (Intl) |
| Format Konten | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml sedang dikerjakan) | ⚠️ .json | ✅ .json, .js | ⚠️ .po, .json | ✅ .json, .js, .ts | ⚠️ .json | ✅ .json, .js |
| Dukungan ICU | ⚠️ Sedang dikerjakan | ⚠️ Melalui plugin (i18next-icu) | ✅ Ya | ✅ Ya | ✅ Ya | ⚠️ Melalui plugin (i18next-icu) | ⚠️ Melalui pemformat/kompiler kustom |
| SEO Helper (hreflang, sitemap) | ✅ Alat bawaan: helper untuk sitemap, robots.txt, metadata | ⚠️ Plugin komunitas/manual | ❌ Bukan inti | ❌ Bukan inti | ✅ Bagus | ✅ Bagus | ❌ Bukan inti (Nuxt i18n menyediakan helper) |
| Ekosistem / Komunitas | ⚠️ Lebih kecil tetapi tumbuh cepat dan reaktif | ✅ Terbesar dan matang | ✅ Besar | ⚠️ Lebih kecil | ✅ Ukuran menengah, fokus pada Next.js | ✅ Ukuran menengah, fokus pada Next.js | ✅ Besar dalam ekosistem Vue |
| Server-side Rendering & Server Components | ✅ Ya, disederhanakan untuk SSR / React Server Components | ⚠️ Didukung di tingkat halaman tetapi perlu meneruskan fungsi-t pada pohon komponen untuk komponen server anak | ⚠️ Didukung di tingkat halaman dengan pengaturan tambahan, tetapi perlu meneruskan fungsi-t pada pohon komponen untuk komponen server anak | ✅ Didukung, perlu pengaturan | ⚠️ Didukung di tingkat halaman tetapi perlu meneruskan fungsi-t pada pohon komponen untuk komponen server anak | ⚠️ Didukung di tingkat halaman tetapi perlu meneruskan fungsi-t pada pohon komponen untuk komponen server anak | ✅ SSR melalui Nuxt/Vue SSR (tanpa RSC) |
| Tree-shaking (hanya muat konten yang digunakan) | ✅ Ya, per komponen pada waktu build melalui plugin Babel/SWC | ⚠️ Biasanya memuat semua (dapat ditingkatkan dengan namespace/pemecahan kode) | ⚠️ Biasanya memuat semua | ❌ Bukan default | ⚠️ Parsial | ⚠️ Parsial | ⚠️ Parsial (dengan pemecahan kode/pengaturan manual) |
| Lazy loading | ✅ Ya, per lokal / per kamus | ✅ Ya (misal: backend/namespace sesuai permintaan) | ✅ Ya (pemisahan bundel lokal) | ✅ Ya (impor katalog dinamis) | ✅ Ya (per rute/per lokal), perlu manajemen namespace | ✅ Ya (per rute/per lokal), perlu manajemen namespace | ✅ Ya (pesan lokal asinkron) |
| Bersihkan konten yang tidak digunakan | ✅ Ya, per kamus pada waktu build | ❌ Tidak, hanya melalui segmentasi namespace manual | ❌ Tidak, semua pesan yang dideklarasikan dibundel | ✅ Ya, kunci yang tidak digunakan terdeteksi & dihapus saat build | ❌ Tidak, dapat dikelola secara manual dengan manajemen namespace | ❌ Tidak, dapat dikelola secara manual dengan manajemen namespace | ❌ Tidak, hanya mungkin melalui lazy-loading manual |
| Manajemen Proyek Besar | ✅ Mendorong modularitas, cocok untuk sistem desain | ⚠️ Perlu disiplin file yang baik | ⚠️ Katalog pusat bisa menjadi besar | ⚠️ Bisa menjadi kompleks | ✅ Modular dengan pengaturan | ✅ Modular dengan pengaturan | ✅ Modular dengan pengaturan Vue Router/Nuxt i18n |
Bintang GitHub
Bintang GitHub adalah indikator kuat dari popularitas proyek, kepercayaan komunitas, dan relevansi jangka panjang. Meskipun bukan ukuran langsung dari kualitas teknis, bintang-bintang tersebut mencerminkan berapa banyak pengembang yang menganggap proyek tersebut berguna, mengikuti kemajuannya, dan kemungkinan akan mengadopsinya. Untuk memperkirakan nilai suatu proyek, bintang membantu membandingkan daya tarik di berbagai alternatif dan memberikan wawasan tentang pertumbuhan ekosistem.
Interoperabilitas
intlayer juga dapat membantu mengelola namespace react-intl, react-i18next, next-intl, next-i18next, dan vue-i18n Anda.
Menggunakan intlayer, Anda dapat mendeklarasikan konten dalam format pustaka i18n favorit Anda, dan intlayer akan menghasilkan namespace Anda di lokasi pilihan Anda (contoh: /messages/{{locale}}/{{namespace}}.json).