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 ServerRiwayat Versi
- Memperbarui tabel perbandinganv5.8.019/8/2025
- Inisialisasi riwayatv5.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 sebuah library internasionalisasi yang dirancang khusus untuk pengembang JavaScript. Library ini memungkinkan deklarasi konten Anda di mana saja dalam kode Anda. Intlayer mengubah deklarasi konten multibahasa menjadi kamus terstruktur agar mudah diintegrasikan dalam kode Anda. Dengan menggunakan TypeScript, Intlayer membuat pengembangan Anda menjadi lebih kuat dan efisien.
Mengapa Intlayer dibuat?
Intlayer dibuat untuk mengatasi masalah umum yang mempengaruhi semua library i18n populer seperti next-intl, react-i18next, react-intl, next-i18next, react-intl, dan vue-i18n.
Semua solusi ini mengadopsi pendekatan terpusat untuk mendaftar dan mengelola konten Anda. Contohnya:
.├── locales│ ├── en.json│ ├── es.json│ └── fr.json├── i18n.ts└── src └── components └── MyComponent └── index.tsxAtau di sini menggunakan namespace:
.├── 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 codebase menjadi lebih kompleks untuk dipelihara karena beberapa alasan:
Untuk setiap komponen baru yang dibuat, Anda harus:
- Membuat resource/namespace baru di folder locales
- Ingat untuk mengimpor namespace baru di halaman Anda
- Menerjemahkan konten Anda (sering dilakukan secara manual dengan menyalin/menempel dari penyedia AI)
Untuk setiap perubahan yang dilakukan pada komponen Anda, Anda harus:
- Mencari resource/namespace terkait (jauh dari komponen)
- Menerjemahkan konten Anda
- Memastikan konten Anda diperbarui untuk setiap locale
- Memverifikasi bahwa namespace Anda tidak menyertakan kunci/nilai yang tidak digunakan
- Memastikan struktur file JSON Anda sama untuk semua locale
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 mengatasi masalah ini, Intlayer mengadopsi pendekatan yang membatasi ruang lingkup konten per-komponen dan menjaga konten Anda tetap dekat dengan komponen Anda, seperti yang sering kita lakukan dengan CSS (styled-components), tipe, dokumentasi (storybook), atau unit test (jest).
.└── 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 autocompletion di IDE Anda (seperti GitHub Copilot) dapat membantu Anda mendeklarasikan konten, mengurangi copy/paste
Membersihkan codebase Anda
- Mengurangi kompleksitas
- Meningkatkan maintainability
Menggandakan komponen dan konten terkaitnya dengan lebih mudah (Contoh: komponen login/register, dll.)
- Dengan membatasi risiko memengaruhi konten komponen lain
- Dengan menyalin/memindahkan konten Anda dari satu aplikasi ke aplikasi lain tanpa ketergantungan eksternal
Hindari pencemaran codebase Anda dengan kunci/nilai yang tidak digunakan untuk komponen yang tidak digunakan
- Jika Anda tidak menggunakan sebuah komponen, Intlayer tidak akan mengimpor konten terkaitnya
- Jika Anda menghapus sebuah komponen, Anda akan lebih mudah mengingat untuk menghapus konten terkaitnya karena akan berada di folder yang sama
Mengurangi biaya penalaran untuk agen AI dalam mendeklarasikan konten multibahasa Anda
- Agen AI tidak perlu memindai seluruh codebase Anda untuk mengetahui di mana mengimplementasikan konten Anda
- Terjemahan dapat dengan mudah dilakukan oleh alat AI autocompletion di IDE Anda (seperti GitHub Copilot)
Mengoptimalkan performa pemuatan
- Jika sebuah komponen dimuat secara lazy, konten terkaitnya akan dimuat bersamaan
Fitur tambahan dari Intlayer
| Fitur | Deskripsi |
|---|---|
 | Dukungan Lintas Framework Intlayer kompatibel dengan semua framework dan pustaka utama, termasuk Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, dan lainnya. |
 | Manajemen Konten Berbasis JavaScript Manfaatkan fleksibilitas JavaScript untuk mendefinisikan dan mengelola konten Anda secara efisien. - Deklarasi Konten |
 | File Deklarasi Konten Per-Locale Percepat pengembangan Anda dengan mendeklarasikan konten Anda sekali saja, sebelum auto generation. - File Deklarasi Konten Per-Locale |
 | Lingkungan Aman-Tipe Manfaatkan TypeScript untuk memastikan definisi konten dan kode Anda bebas dari kesalahan, sekaligus mendapatkan keuntungan dari autocompletion di IDE. - Konfigurasi TypeScript |
 | Pengaturan yang Disederhanakan Mulai dengan cepat menggunakan konfigurasi minimal. Sesuaikan pengaturan untuk internasionalisasi, routing, AI, build, dan penanganan konten dengan mudah. - Jelajahi integrasi Next.js |
 | Pengambilan Konten yang Disederhanakan Tidak perlu memanggil fungsi t Anda untuk setiap potongan konten. Ambil semua konten Anda 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 ke setiap komponen server. - Komponen Server |
 | Codebase Terorganisir Jaga codebase Anda lebih terorganisir: 1 komponen = 1 kamus dalam folder yang sama. Terjemahan yang dekat dengan komponen masing-masing meningkatkan pemeliharaan dan kejelasan. - Cara Kerja Intlayer |
 | Routing yang Ditingkatkan Dukungan penuh untuk routing aplikasi, beradaptasi dengan mulus pada struktur aplikasi yang kompleks, untuk Next.js, React, Vite, Vue.js, dll. - Jelajahi integrasi Next.js |
 | Dukungan Markdown Impor dan interpretasikan file locale serta 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 eksternalkan sepenuhnya atau sebagian dengan CMS. - Editor Intlayer - CMS Intlayer |
 | Konten Tree-shakable Konten tree-shakable, mengurangi ukuran bundle akhir. Memuat konten per komponen, mengecualikan konten yang tidak digunakan dari bundle Anda. Mendukung lazy loading untuk meningkatkan efisiensi pemuatan aplikasi. - Optimasi build aplikasi |
 | Rendering Statis Tidak menghalangi Rendering Statis. - Integrasi Next.js |
 | Terjemahan Berbasis AI Ubah situs web Anda ke dalam 231 bahasa hanya dengan satu klik menggunakan alat terjemahan canggih berbasis AI dari Intlayer dengan menggunakan penyedia AI/kunci API Anda sendiri. - Integrasi CI/CD - Intlayer CLI - Isi otomatis |
 | Integrasi Server MCP Menyediakan server MCP (Model Context Protocol) untuk otomatisasi IDE, memungkinkan manajemen konten dan alur kerja i18n yang mulus langsung di dalam lingkungan pengembangan Anda. - Server MCP |
 | Ekstensi VSCode Intlayer menyediakan ekstensi VSCode untuk membantu Anda mengelola konten dan terjemahan Anda, membangun kamus Anda, menerjemahkan konten Anda, dan lainnya. - 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 |
| Pengujian Terjemahan yang Hilang (CLI/CI) | ✅ CLI: npx intlayer content test (audit ramah CI) |
Perbandingan Intlayer dengan solusi lain
| Fitur | intlayer | react-i18next | react-intl (FormatJS) | lingui | next-intl | next-i18next | vue-i18n |
|---|---|---|---|---|---|---|---|
| Terjemahan Dekat Komponen | ✅ Ya, konten ditempatkan bersama dengan setiap komponen | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ Tidak | ✅ Ya - menggunakan Single File Components (SFCs) |
| Integrasi TypeScript | ✅ Lanjutan, tipe ketat yang dihasilkan otomatis | ⚠️ Dasar; konfigurasi tambahan untuk keamanan | ✅ Baik, tetapi kurang ketat | ⚠️ Pengetikan, perlu konfigurasi | ✅ Baik | ⚠️ Dasar | ✅ Baik (tipe tersedia; keamanan kunci perlu pengaturan) |
| Deteksi Terjemahan yang Hilang | ✅ Sorotan error TypeScript dan error/peringatan saat build | ⚠️ Sebagian besar string fallback saat runtime | ⚠️ String fallback | ⚠️ Membutuhkan konfigurasi tambahan | ⚠️ Fallback saat runtime | ⚠️ Fallback saat runtime | ⚠️ Fallback/peringatan saat runtime (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 ruang lingkup konten Anda | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ Tidak | ❌ 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 | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal | ❌ Tidak / tersedia melalui platform lokalisasi eksternal |
| Routing Lokal | ✅ Ya, mendukung path yang dilokalkan 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 | ⚠️ Tidak bawaan, memerlukan plugin atau konfigurasi manual | ✅ Bawaan, App Router mendukung segmen [locale] | ✅ Bawaan | ✅ Bawaan |
| Dynamic Route Generation | ✅ 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) | ✅ Baik | ✅ Baik | ✅ Aturan plural bawaan |
| Format (tanggal, angka, mata uang) | ✅ Formatter yang dioptimalkan (Intl di balik layar) | ⚠️ Melalui plugin atau penggunaan Intl kustom | ✅ Formatter ICU | ✅ Bantuan ICU/CLI | ✅ Baik (bantuan Intl) | ✅ Baik (bantuan Intl) | ✅ Formatter tanggal/angka bawaan (Intl) |
| Format Konten | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP) | ⚠️ .json | ✅ .json, .js | ⚠️ .po, .json | ✅ .json, .js, .ts | ⚠️ .json | ✅ .json, .js |
| Dukungan ICU | ⚠️ Sedang dalam pengerjaan | ⚠️ Melalui plugin (i18next-icu) | ✅ Ya | ✅ Ya | ✅ Ya | ⚠️ Melalui plugin (i18next-icu) | ⚠️ Melalui formatter/compiler kustom |
| Bantuan SEO (hreflang, sitemap) | ✅ Alat bawaan: bantuan untuk sitemap, robots.txt, metadata | ⚠️ Plugin komunitas/manual | ❌ Bukan inti | ❌ Bukan inti | ✅ Baik | ✅ Baik | ❌ Bukan inti (Nuxt i18n menyediakan bantuan) |
| Ekosistem / Komunitas | ⚠️ Lebih kecil tetapi tumbuh cepat dan responsif | ✅ Terbesar dan matang | ✅ Besar | ⚠️ Lebih kecil | ✅ Ukuran menengah, berfokus pada Next.js | ✅ Ukuran menengah, berfokus pada Next.js | ✅ Besar dalam ekosistem Vue |
| Rendering sisi-server & Komponen Server | ✅ Ya, dioptimalkan untuk SSR / Komponen Server React | ⚠️ Didukung pada tingkat halaman tetapi perlu meneruskan fungsi t pada pohon komponen untuk komponen server anak | ⚠️ Didukung pada tingkat halaman dengan pengaturan tambahan, tetapi perlu meneruskan fungsi t pada pohon komponen untuk komponen server anak | ✅ Didukung, pengaturan diperlukan | ⚠️ Didukung pada tingkat halaman tetapi perlu meneruskan fungsi t pada pohon komponen untuk komponen server anak | ⚠️ Didukung pada tingkat halaman tetapi perlu meneruskan fungsi t pada pohon komponen untuk komponen server anak | ✅ SSR melalui Nuxt/Vue SSR (tanpa RSC) |
| Tree-shaking (memuat hanya konten yang digunakan) | ✅ Ya, per-komponen saat build time melalui plugin Babel/SWC | ⚠️ Biasanya memuat semuanya (dapat ditingkatkan dengan namespaces/pemisahan kode) | ⚠️ Biasanya memuat semuanya | ❌ Bukan default | ⚠️ Sebagian | ⚠️ Sebagian | ⚠️ Sebagian (dengan pemisahan kode/pengaturan manual) |
| Lazy loading | ✅ Ya, per-locale / per-dictionary | ✅ Ya (misalnya, backends/namespaces sesuai permintaan) | ✅ Ya (memisahkan bundle locale) | ✅ Ya (impor katalog dinamis) | ✅ Ya (per-route/per-locale), perlu manajemen namespace | ✅ Ya (per-route/per-locale), perlu manajemen namespace | ✅ Ya (pesan locale asinkron) |
| Membersihkan konten yang tidak digunakan | ✅ Ya, per-kamus pada waktu build | ❌ Tidak, hanya melalui segmentasi namespace manual | ❌ Tidak, semua pesan yang dideklarasikan dikemas | ✅ 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 modular, cocok untuk design-system | ⚠️ Membutuhkan disiplin file yang baik | ⚠️ Katalog pusat bisa menjadi besar | ⚠️ Mungkin menjadi kompleks | ✅ Modular dengan setup | ✅ Modular dengan setup | ✅ Modular dengan setup 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 tersebut mencerminkan berapa banyak pengembang yang menganggap proyek ini 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.
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 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.