@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.20

package/docs/id/interest_of_intlayer.md

@@ -30,6 +30,10 @@ author: aymericzip
 
 # Mengapa Anda harus mempertimbangkan Intlayer?
 
+## Apa itu Intlayer?
+
+**Intlayer** adalah perpustakaan internasionalisasi yang dirancang khusus untuk pengembang JavaScript. Ini memungkinkan deklarasi konten Anda di mana saja dalam kode Anda. Ini mengonversi 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 dibandingkan alternatif?
 
 Dibandingkan dengan solusi utama seperti `next-intl` atau `i18next`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
@@ -87,6 +91,195 @@ Jika Anda menggunakan kerangka kerja yang berbeda untuk bagian aplikasi yang ber
 
 ---
 
+## 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:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Atau di sini menggunakan namespace:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Tipe arsitektur ini memperlambat proses pengembangan dan membuat codebase lebih kompleks untuk dipertahankan karena beberapa alasan:
+
+1. **Untuk setiap komponen baru yang dibuat, Anda harus:**
+   - Membuat resource/namespace baru di folder `locales`
+   - Mengingat untuk mengimpor namespace baru di halaman Anda
+   - Menerjemahkan konten Anda (sering dilakukan secara manual dengan copy/paste dari penyedia AI)
+
+2. **Untuk setiap perubahan yang dilakukan pada komponen Anda, Anda harus:**
+   - Mencari resource/namespace terkait (jauh dari komponen)
+   - Menerjemahkan konten Anda
+   - Memastikan konten Anda terbaru untuk setiap locale
+   - Memverifikasi namespace Anda tidak mencakup key/value 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 konten Anda per-komponen dan menjaga konten Anda dekat dengan komponen Anda, seperti yang sering kita lakukan dengan CSS (`styled-components`), types, dokumentasi (`storybook`), atau unit tests (`jest`).
+
+```bash codeFormat="typescript"
+.
+└── components
+    └── MyComponent
+        ├── index.content.ts
+        ├── index.test.tsx
+        ├── index.stories.tsx
+        └── index.tsx
+```
+
+```bash codeFormat="commonjs"
+.
+└── components
+    └── MyComponent
+        ├── index.content.cjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
+```
+
+```bash codeFormat="esm"
+.
+└── components
+    └── MyComponent
+        ├── index.content.mjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
+```
+
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      id: "Halo Dunia",
+      en: "Hello World",
+      es: "Hola Mundo",
+      fr: "Bonjour le monde",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat={["typescript", "esm"]}
+import { useIntlayer } from "react-intlayer";
+
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+Pendekatan ini memungkinkan Anda untuk:
+
+1. **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 Anda, mengurangi copy/paste
+
+2. **Membersihkan codebase Anda**
+   - Mengurangi kompleksitas
+   - Meningkatkan maintainability
+
+3. **Menduplikasi komponen Anda dan konten terkait dengan lebih mudah (Contoh: komponen login/register, dll.)**
+   - Dengan membatasi risiko berdampak pada konten komponen lain
+   - Dengan copy/paste konten Anda dari satu aplikasi ke aplikasi lain tanpa dependensi eksternal
+
+4. **Hindari mengotori codebase Anda dengan key/value 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
+
+5. **Kurangi biaya reasoning untuk agen AI untuk mendeklarasikan konten multibahasa Anda**
+   - Agen AI tidak akan harus memindai seluruh codebase Anda untuk mengetahui di mana harus mengimplementasikan konten Anda
+   - Terjemahan dapat dilakukan dengan mudah oleh alat AI autocompletion di IDE Anda (seperti GitHub Copilot)
+
+6. **Optimalkan kinerja loading**
+   - Jika komponen di-lazy-load, konten terkaitnya akan dimuat pada saat yang sama
+
+## Fitur Tambahan Intlayer
+
+| Feature                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                        |
+| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Dukungan Lintas Framework**<br><br>Intlayer kompatibel dengan semua framework dan library utama, termasuk Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, dan lainnya.                                                                                                                                                                                                                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **Manajemen Konten Bertenaga JavaScript**<br><br>Manfaatkan fleksibilitas JavaScript untuk mendefinisikan dan mengelola konten Anda secara efisien. <br><br> - [Deklarasi konten](https://intlayer.org/doc/concept/content)                                                                                                                                                                                        |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700">  | **Compiler**<br><br>Intlayer Compiler mengekstrak konten secara otomatis dari komponen dan menghasilkan file kamus.<br><br> - [Compiler](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **File Deklarasi Konten Per-Locale**<br><br>Percepat pengembangan Anda dengan mendeklarasikan konten Anda sekali, sebelum pembuatan otomatis.<br><br> - [File Deklarasi Konten Per-Locale](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Lingkungan Aman Tipe**<br><br>Manfaatkan TypeScript untuk memastikan definisi konten dan kode Anda bebas kesalahan, sambil juga menikmati autocompletion IDE.<br><br> - [Konfigurasi TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Penyiapan Disederhanakan**<br><br>Mulai dengan cepat dengan konfigurasi minimal. Sesuaikan pengaturan untuk internasionalisasi, routing, AI, build, dan penanganan konten dengan mudah. <br><br> - [Jelajahi integrasi Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Pengambilan Konten Disederhanakan**<br><br>Tidak perlu memanggil fungsi `t` Anda untuk setiap bagian konten. Ambil semua konten Anda secara langsung menggunakan satu hook.<br><br> - [Integrasi React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Implementasi Komponen Server Konsisten**<br><br>Sangat cocok untuk komponen server Next.js, gunakan implementasi yang sama untuk komponen klien dan server, tidak perlu melewatkan fungsi `t` Anda di setiap komponen server. <br><br> - [Komponen Server](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Codebase Terorganisir**<br><br>Jaga codebase Anda lebih terorganisir: 1 komponen = 1 kamus dalam folder yang sama. Terjemahan yang dekat dengan komponen mereka masing-masing meningkatkan kemudahan pemeliharaan dan kejelasan. <br><br> - [Cara Kerja Intlayer](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                           |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Routing Ditingkatkan**<br><br>Dukungan lengkap routing aplikasi, beradaptasi dengan mulus dengan struktur aplikasi yang kompleks, untuk Next.js, React, Vite, Vue.js, dll.<br><br> - [Jelajahi integrasi Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                   |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Dukungan Markdown**<br><br>Impor dan interpretasikan file locale dan Markdown jarak jauh untuk konten multibahasa seperti kebijakan privasi, dokumentasi, dll. Interpretasikan dan buat metadata Markdown dapat diakses dalam kode Anda.<br><br> - [File konten](https://intlayer.org/doc/concept/content/file)                                                                                                  |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Editor Visual & CMS Gratis**<br><br>Editor visual dan CMS gratis tersedia untuk penulis konten, menghilangkan kebutuhan akan platform lokalisasi. Jaga konten Anda tetap tersinkronisasi menggunakan Git, atau eksternalisasi sepenuhnya atau sebagian dengan CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)              |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Konten Tree-shakable**<br><br>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 loading aplikasi. <br><br> - [Optimasi build aplikasi](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Rendering Statis**<br><br>Tidak memblokir Rendering Statis. <br><br> - [Integrasi Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                          |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **Terjemahan Bertenaga AI**<br><br>Ubah situs web Anda menjadi 231 bahasa dengan hanya satu klik menggunakan alat terjemahan bertenaga AI Intlayer yang canggih menggunakan penyedia/kunci API AI Anda sendiri. <br><br> - [Integrasi CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Isi Otomatis](https://intlayer.org/doc/concept/auto-fill) |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **Integrasi MCP Server**<br><br>Menyediakan server MCP (Model Context Protocol) untuk otomasi IDE, memungkinkan manajemen konten dan alur kerja i18n yang mulus langsung dalam lingkungan pengembangan Anda. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/mcp_server.md)                                                                                                  |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **Ekstensi VSCode**<br><br>Intlayer menyediakan ekstensi VSCode untuk membantu Anda mengelola konten dan terjemahan, membangun kamus Anda, menerjemahkan konten Anda, dan lainnya. <br><br> - [Ekstensi VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                        |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Interoperabilitas**<br><br>Memungkinkan interoperabilitas dengan react-i18next, next-i18next, next-intl, dan react-intl. <br><br> - [Intlayer dan react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer dan next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer dan next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                    |
+| Testing Missing Translations (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 dengan Komponen**                | ✅ Ya, konten diletakkan bersama setiap komponen                                                                                       | ❌ Tidak                                                                                                            | ❌ Tidak                                                                                                                                   | ❌ Tidak                                                          | ❌ Tidak                                                                                                            | ❌ Tidak                                                                                                            | ✅ Ya - menggunakan `Single File Components` (SFCs)        |
+| **Integrasi TypeScript**                            | ✅ Lanjutan, tipe yang ketat dan auto-generated                                                                                        | ⚠️ Dasar; konfigurasi tambahan untuk keamanan                                                                       | ✅ Baik, tetapi kurang ketat                                                                                                               | ⚠️ Typing, perlu konfigurasi                                      | ✅ Baik                                                                                                             | ⚠️ Dasar                                                                                                            | ✅ Baik (tipe tersedia; keamanan kunci perlu setup)        |
+| **Deteksi Terjemahan Hilang**                       | ✅ Error TypeScript dan error/warning saat build-time                                                                                  | ⚠️ Sebagian besar fallback string saat runtime                                                                      | ⚠️ Fallback string                                                                                                                         | ⚠️ Perlu konfigurasi tambahan                                     | ⚠️ Fallback runtime                                                                                                 | ⚠️ Fallback runtime                                                                                                 | ⚠️ Fallback/peringatan runtime (dapat dikonfigurasi)       |
+| **Konten Kaya (JSX/Markdown/komponen)**             | ✅ Dukungan langsung                                                                                                                   | ⚠️ Terbatas / interpolasi saja                                                                                      | ⚠️ Sintaks ICU, bukan JSX asli                                                                                                             | ⚠️ Terbatas                                                       | ❌ Tidak dirancang untuk node kaya                                                                                  | ⚠️ Terbatas                                                                                                         | ⚠️ Terbatas (komponen via `<i18n-t>`, Markdown via plugin) |
+| **Terjemahan Bertenaga AI**                         | ✅ Ya, mendukung multiple AI provider. Dapat digunakan dengan API key Anda sendiri. Mempertimbangkan konteks aplikasi dan scope konten | ❌ Tidak                                                                                                            | ❌ Tidak                                                                                                                                   | ❌ Tidak                                                          | ❌ Tidak                                                                                                            | ❌ Tidak                                                                                                            | ❌ Tidak                                                   |
+| **Editor Visual**                                   | ✅ Ya, Visual Editor lokal + CMS opsional; dapat mengeksternal konten codebase; embeddable                                             | ❌ Tidak / tersedia via platform lokalisasi eksternal                                                               | ❌ Tidak / tersedia via platform lokalisasi eksternal                                                                                      | ❌ Tidak / tersedia via platform lokalisasi eksternal             | ❌ Tidak / tersedia via platform lokalisasi eksternal                                                               | ❌ Tidak / tersedia via platform lokalisasi eksternal                                                               | ❌ Tidak / tersedia via platform lokalisasi eksternal      |
+| **Routing Terlokalisasi**                           | ✅ Ya, mendukung path terlokalisasi out of the box (bekerja dengan Next.js & Vite)                                                     | ⚠️ Tidak built-in, memerlukan plugin (mis. `next-i18next`) atau konfigurasi router custom                           | ❌ Tidak, hanya pemformatan pesan, routing harus manual                                                                                    | ⚠️ Tidak built-in, memerlukan plugin atau konfigurasi manual      | ✅ Built-in, App Router mendukung segmen `[locale]`                                                                 | ✅ Built-in                                                                                                         | ✅ Built-in                                                |
+| **Generasi Rute Dinamis**                           | ✅ Ya                                                                                                                                  | ⚠️ Plugin/ekosistem atau setup 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 built-in                                  |
+| **Pemformatan (tanggal, angka, mata uang)**         | ✅ Formatter yang optimal (Intl under the hood)                                                                                        | ⚠️ Via plugin atau penggunaan Intl custom                                                                           | ✅ Formatter ICU                                                                                                                           | ✅ Pembantu ICU/CLI                                               | ✅ Baik (pembantu Intl)                                                                                             | ✅ Baik (pembantu Intl)                                                                                             | ✅ Formatter tanggal/angka built-in (Intl)                 |
+| **Format Konten**                                   | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)                                                                                       | ⚠️ .json                                                                                                            | ✅ .json, .js                                                                                                                              | ⚠️ .po, .json                                                     | ✅ .json, .js, .ts                                                                                                  | ⚠️ .json                                                                                                            | ✅ .json, .js                                              |
+| **Dukungan ICU**                                    | ⚠️ WIP                                                                                                                                 | ⚠️ Via plugin (i18next-icu)                                                                                         | ✅ Ya                                                                                                                                      | ✅ Ya                                                             | ✅ Ya                                                                                                               | ⚠️ Via plugin (`i18next-icu`)                                                                                       | ⚠️ Via formatter/compiler custom                           |
+| **Pembantu SEO (hreflang, sitemap)**                | ✅ Tool built-in: pembantu untuk sitemap, robots.txt, metadata                                                                         | ⚠️ Plugin komunitas/manual                                                                                          | ❌ Bukan core                                                                                                                              | ❌ Bukan core                                                     | ✅ Baik                                                                                                             | ✅ Baik                                                                                                             | ❌ Bukan core (Nuxt i18n menyediakan pembantu)             |
+| **Ekosistem / Komunitas**                           | ⚠️ Lebih kecil tetapi berkembang cepat dan responsif                                                                                   | ✅ Terbesar dan matang                                                                                              | ✅ Besar                                                                                                                                   | ⚠️ Lebih kecil                                                    | ✅ Mid-size, fokus Next.js                                                                                          | ✅ Mid-size, fokus Next.js                                                                                          | ✅ Besar di ekosistem Vue                                  |
+| **Server-side Rendering & Server Components**       | ✅ Ya, streamlined untuk SSR / React Server Components                                                                                 | ⚠️ Didukung di level halaman tetapi perlu melewatkan t-functions di component tree untuk children server components | ⚠️ Didukung di level halaman dengan setup tambahan, tetapi perlu melewatkan t-functions di component tree untuk children server components | ✅ Didukung, setup diperlukan                                     | ⚠️ Didukung di level halaman tetapi perlu melewatkan t-functions di component tree untuk children server components | ⚠️ Didukung di level halaman tetapi perlu melewatkan t-functions di component tree untuk children server components | ✅ SSR via Nuxt/Vue SSR (tidak ada RSC)                    |
+| **Tree-shaking (muat hanya konten yang digunakan)** | ✅ Ya, per-komponen saat build time via plugin Babel/SWC                                                                               | ⚠️ Biasanya memuat semua (dapat ditingkatkan dengan namespace/code-splitting)                                       | ⚠️ Biasanya memuat semua                                                                                                                   | ❌ Bukan default                                                  | ⚠️ Parsial                                                                                                          | ⚠️ Parsial                                                                                                          | ⚠️ Parsial (dengan code-splitting/setup manual)            |
+| **Lazy loading**                                    | ✅ Ya, per-locale / per-dictionary                                                                                                     | ✅ Ya (mis., backend/namespace on demand)                                                                           | ✅ Ya (split locale bundle)                                                                                                                | ✅ Ya (dynamic catalog import)                                    | ✅ Ya (per-route/per-locale), perlu manajemen namespace                                                             | ✅ Ya (per-route/per-locale), perlu manajemen namespace                                                             | ✅ Ya (async locale message)                               |
+| **Hapus konten yang tidak digunakan**               | ✅ Ya, per-dictionary saat build time                                                                                                  | ❌ Tidak, hanya via segmentasi namespace manual                                                                     | ❌ Tidak, semua pesan yang dideklarasikan di-bundle                                                                                        | ✅ Ya, kunci yang tidak digunakan terdeteksi & dihapus saat build | ❌ Tidak, dapat dikelola manual dengan manajemen namespace                                                          | ❌ Tidak, dapat dikelola manual dengan manajemen namespace                                                          | ❌ Tidak, hanya mungkin via lazy-loading manual            |
+| **Manajemen Proyek Besar**                          | ✅ Mendorong modular, cocok untuk design-system                                                                                        | ⚠️ Perlu disiplin file yang baik                                                                                    | ⚠️ Katalog pusat dapat membesar                                                                                                            | ⚠️ 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-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.

package/docs/id/intlayer_CMS.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-08-23
+updatedAt: 2026-07-08
 title: Intlayer CMS | Eksternalisasi konten Anda ke Intlayer CMS
 description: Eksternalisasi konten Anda ke Intlayer CMS untuk mendelegasikan pengelolaan konten kepada tim Anda.
 keywords:
@@ -18,6 +18,9 @@ slugs:
   - cms
 youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Bagian 'Sinkronisasi langsung' dipindahkan ke halamannya sendiri (live-sync.md), hanya menyisakan pengantar singkat dan tautan di sini"
   - version: 6.0.1
     date: 2025-09-22
     changes: "Menambahkan dokumentasi live sync"
@@ -245,144 +248,7 @@ Kemudian Anda akan dapat melihat dan mengelola kamus Anda di [Intlayer CMS](http
 
 Sinkronisasi Langsung memungkinkan aplikasi Anda mencerminkan perubahan konten CMS secara real-time. Tidak perlu membangun ulang atau menerapkan ulang. Saat diaktifkan, pembaruan dikirimkan ke server Sinkronisasi Langsung yang menyegarkan kamus yang dibaca aplikasi Anda.
 
-Aktifkan Sinkronisasi Langsung dengan memperbarui konfigurasi Intlayer Anda:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... pengaturan konfigurasi lainnya
-  editor: {
-    /**
-     * Mengaktifkan hot reloading konfigurasi locale saat perubahan terdeteksi.
-     * Misalnya, ketika sebuah kamus ditambahkan atau diperbarui, aplikasi akan memperbarui
-     * konten yang ditampilkan pada halaman.
-     *
-     * Karena hot reloading memerlukan koneksi terus-menerus ke server, fitur ini
-     * hanya tersedia untuk klien dengan paket `enterprise`.
-     *
-     * Default: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Mengontrol bagaimana kamus diimpor:
-     *
-     * - "live": Kamus diambil secara dinamis menggunakan Live Sync API.
-     *   Menggantikan useIntlayer dengan useDictionaryDynamic.
-     *
-     * Catatan: Mode live menggunakan Live Sync API untuk mengambil kamus. Jika panggilan API
-     * gagal, kamus diimpor secara dinamis.
-     * Catatan: Hanya kamus dengan konten jarak jauh dan flag "live" yang menggunakan mode live.
-     * Yang lain menggunakan mode dinamis untuk kinerja.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-Mulai server Live Sync untuk membungkus aplikasi Anda:
-
-Contoh menggunakan server mandiri:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... skrip lainnya
-    "live:start": "npx intlayer live",
-  },
-}
-```
-
-Anda juga dapat menggunakan server aplikasi Anda secara paralel dengan menggunakan argumen `--process`.
-
-Contoh menggunakan Next.js:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... skrip lainnya
-    "build": "next build",
-    "dev": "next dev",
-    "start": "npx intlayer live --with 'next start'",
-  },
-}
-```
-
-Contoh menggunakan Vite:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... skrip lainnya
-    "build": "vite build",
-    "dev": "vite dev",
-    "start": "npx intlayer live --with 'vite start'",
-  },
-}
-```
-
-Server Live Sync membungkus aplikasi Anda dan secara otomatis menerapkan konten yang diperbarui saat konten tersebut tiba.
-
-Untuk menerima notifikasi perubahan dari CMS, server Live Sync mempertahankan koneksi SSE ke backend. Ketika konten berubah di CMS, backend meneruskan pembaruan ke server Live Sync, yang kemudian menulis kamus baru. Aplikasi Anda akan mencerminkan pembaruan tersebut pada navigasi berikutnya atau saat memuat ulang browser, tidak perlu membangun ulang.
-
-Diagram alur (CMS/Backend -> Server Live Sync -> Server Aplikasi -> Frontend):
-
-![Alur Live Sync CMS/Backend/Server Live Sync/Server Aplikasi/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
-
-Cara kerjanya:
-
-![Skema Logika Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
-
-### Alur kerja pengembangan (lokal)
-
-- Dalam pengembangan, semua kamus jarak jauh diambil saat aplikasi dimulai, sehingga Anda dapat menguji pembaruan dengan cepat.
-- Untuk menguji Live Sync secara lokal dengan Next.js, bungkus server dev Anda:
-
-```json5 fileName="package.json"
-{
-  "scripts": {
-    // ... skrip lainnya
-    "dev": "npx intlayer live --with 'next dev'",
-    // "dev": "npx intlayer live --with 'vite dev'", // Untuk Vite
-  },
-}
-```
-
-Aktifkan optimasi agar Intlayer menerapkan transformasi impor Live selama pengembangan:
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import type { IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-export default config;
-```
-
-Pengaturan ini membungkus server dev Anda dengan server Live Sync, mengambil kamus jarak jauh saat startup, dan mengalirkan pembaruan dari CMS melalui SSE. Segarkan halaman untuk melihat perubahan.
-
-Catatan dan batasan:
-
-- Tambahkan origin live sync ke kebijakan keamanan situs Anda (CSP). Pastikan URL live sync diizinkan dalam `connect-src` (dan `frame-ancestors` jika relevan).
-- Live Sync tidak berfungsi dengan output statis. Untuk Next.js, halaman harus dinamis agar dapat menerima pembaruan saat runtime (misalnya, gunakan `generateStaticParams`, `generateMetadata`, `getServerSideProps`, atau `getStaticProps` secara tepat untuk menghindari batasan hanya statis penuh).
-- Di CMS, setiap kamus memiliki flag `live`. Hanya kamus dengan `live=true` yang diambil melalui API live sync; yang lain diimpor secara dinamis dan tetap tidak berubah saat runtime.
-- Flag `live` dievaluasi untuk setiap kamus saat build. Jika konten jarak jauh tidak diberi flag `live=true` selama build, Anda harus membangun ulang untuk mengaktifkan Live Sync untuk kamus tersebut.
-- Server live sync harus dapat menulis ke `.intlayer`. Dalam container, pastikan akses tulis ke `/.intlayer`.
+Untuk panduan pengaturan lengkap (mengaktifkan, menjalankan server Live Sync, alur kerja pengembangan lokal, dan batasan), lihat [dokumentasi Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/live-sync.md).
 
 ## Debug
 

package/docs/id/intlayer_with_adonisjs.md

@@ -59,24 +59,44 @@ Lihat [Application Template](https://github.com/aymericzip/intlayer-adonis-templ
 
 Untuk mulai menggunakan `adonis-intlayer`, instal paket menggunakan npm:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
+
+> Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Misalnya:
+
 ```bash packageManager="npm"
 npm install intlayer adonis-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer adonis-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer adonis-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer adonis-intlayer
-bun x intlayer init
 ```
 
 ### Penyiapan

package/docs/id/intlayer_with_analog.md

@@ -118,24 +118,44 @@ Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-analog-template)
 
 Instal paket-paket yang diperlukan menggunakan npm:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
+
+> Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Misalnya:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer vite-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer vite-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer vite-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer vite-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -191,7 +211,11 @@ import analog from "@analogjs/platform";
 export default defineConfig(() => ({
   plugins: [
     analog(),
-    intlayer(), // Tambahkan plugin Intlayer
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 }));
 ```

package/docs/id/intlayer_with_angular_19.md

@@ -124,28 +124,48 @@ Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-angular-19-templ
 
 Instal paket-paket yang diperlukan menggunakan npm:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
+
+> Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Misalnya:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-webpack --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-webpack --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-webpack --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-webpack --dev
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/id/intlayer_with_angular_21.md

@@ -123,28 +123,48 @@ Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-angular-21-templ
 
 Instal paket yang diperlukan menggunakan npm:
 
+```bash packageManager="npm"
+npx intlayer@canary init --interactive    # v9
+# npx intlayer init                       # v8
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive   # v9
+# pnpm dlx intlayer init                      # v8
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive   # v9
+# yarn dlx intlayer init                      # v8
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive   # v9
+# bunx intlayer init                      # v8
+```
+
+> flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
+
+> Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Misalnya:
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-esbuild --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-esbuild --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-esbuild --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-esbuild --dev
-bun x intlayer init
 ```
 
 - **intlayer**