@intlayer/docs 9.4.2 → 9.4.4

package/blog/id/i18n_meaning.md

@@ -19,8 +19,6 @@ author: aymericzip
 
 # Arti i18n: Apa itu Internasionalisasi dan Mengapa Itu Penting?
 
-![ilustrasi i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Memahami "Arti i18n"
 
 Jika Anda terlibat dalam pengembangan perangkat lunak, desain web, atau pemasaran digital, Anda kemungkinan besar pernah menjumpai istilah **i18n**. **Arti i18n** yang sebenarnya hanyalah sebuah numeronim untuk **internationalization** (internasionalisasi).

package/blog/id/i18n_testing_strategies.md

@@ -0,0 +1,179 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Cara Menguji Terjemahan Tanpa Menulis Tes yang Rapuh"
+description: Apa yang layak diuji dalam aplikasi i18n dan apa yang tidak. Pengujian rendering berbasis provider, pseudolokalisasi, cakupan RTL dan bentuk jamak, serta jebakan snapshot.
+keywords:
+  - uji terjemahan
+  - pengujian i18n
+  - testing library i18n
+  - pseudolokalisasi
+  - uji provider locale
+  - snapshot test i18n
+slugs:
+  - blog
+  - i18n-testing-strategies
+author: aymericzip
+---
+
+# Cara Menguji Terjemahan Tanpa Menulis Tes yang Rapuh
+
+Sebagian besar suite pengujian i18n gagal karena salah satu dari dua alasan. Entah mereka menegaskan teks literal, sehingga setiap perubahan kata merusak lima puluh tes dan tim akhirnya menghapusnya. Atau mereka merender semuanya hanya dalam locale default, sehingga tidak membuktikan apa pun tentang tujuh belas locale lainnya. Keduanya berakhir di tempat yang sama: suite yang tidak dipercaya siapa pun.
+
+## Daftar Isi
+
+<TOC/>
+
+## Pola ini tidak bergantung pada library tertentu
+
+Setiap pola di bawah ini berfungsi pada stack i18n mana pun. Ganti provider dengan `I18nextProvider`, `NextIntlClientProvider`, atau `IntlProvider` dan pengujian tetap identik, karena mereka memvalidasi output render alih-alih API library tertentu.
+
+Perangkat pengujian cakupan juga dapat dipindahkan: dengan [plugin Sync JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/plugins/sync-json.md) yang diarahkan ke katalog yang ada, atau [adapter kompatibilitas](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compat/index.md) yang membuat alias pada import saat ini, asersi cakupan berjalan langsung terhadap file JSON yang sudah Anda miliki.
+
+## Tentukan apa yang sebenarnya Anda uji
+
+Kualitas terjemahan bukan sesuatu yang bisa diuji dengan kode. Tidak ada assertion yang dapat memberi tahu apakah bahasa Jerman terdengar alami, dan mencoba melakukannya hanya akan memenuhi suite Anda dengan string hardcoded.
+
+Hal-hal mekanis yang layak diuji meliputi:
+
+| Layak diuji                                   | Tidak layak diuji                      |
+| :-------------------------------------------- | :------------------------------------- |
+| Setiap locale wajib memiliki nilai            | Apakah susunan katanya indah           |
+| Locale yang tepat mencapai komponen           | Teks persis dari setiap label          |
+| Bentuk jamak diselesaikan untuk tiap kategori | Apakah penerjemah bekerja teliti       |
+| Locale RTL mengatur arah dan pencerminan      | Setiap string di setiap locale         |
+| Tanggal dan angka yang diformat sesuai locale | Kebenaran implementasi internal `Intl` |
+
+Pengujian cakupan harus dilakukan dalam satu tes berbasis data, bukan dalam tes komponen individual. Hal ini dibahas secara rinci di [menemukan terjemahan yang hilang](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/detecting_missing_translations.md); artikel ini berfokus pada aspek lainnya.
+
+## Render di bawah provider dan periksa berdasarkan peran (Role)
+
+Pola utamanya adalah memasang komponen di dalam provider locale dan mencari elemen berdasarkan role atau test id daripada teks literal.
+
+```tsx fileName="CartSummary.test.tsx"
+import { render, screen } from "@testing-library/react";
+import { IntlayerProvider } from "react-intlayer/client";
+import { CartSummary } from "./CartSummary";
+
+test("merender judul ringkasan dalam bahasa Prancis", () => {
+  render(
+    <IntlayerProvider locale="fr-FR">
+      <CartSummary />
+    </IntlayerProvider>
+  );
+
+  expect(screen.getByRole("heading")).toBeInTheDocument();
+});
+```
+
+Mencari dengan `getByRole("heading")` tetap bertahan saat kata-kata berubah. Sebaliknya `getByText("Récapitulatif")` langsung gagal saat ada penyesuaian teks. Gunakan teks literal hanya jika string itu sendiri yang menjadi objek pengujian, yang sebenarnya sangat jarang.
+
+Untuk atribut seperti `aria-label`, Anda memerlukan string mentah daripada node yang dapat dirender. Di React, entri `useIntlayer` menyediakan field `.value` untuk kebutuhan ini.
+
+## Parameterisasi pengujian di seluruh locale
+
+Satu logika tes yang dijalankan pada setiap locale jauh lebih bernilai daripada menulis tes terpisah untuk masing-masing bahasa.
+
+```tsx fileName="direction.test.tsx"
+import { getHTMLTextDir } from "intlayer";
+import { render } from "@testing-library/react";
+import { IntlayerProvider } from "react-intlayer/client";
+
+describe.each(["en", "fr", "ja", "ar"])("locale %s", (locale) => {
+  it("merender tanpa fallback ke nama key", () => {
+    const { container } = render(
+      <IntlayerProvider locale={locale}>
+        <CartSummary />
+      </IntlayerProvider>
+    );
+
+    // Key yang ter-render berarti pencarian gagal.
+    expect(container.textContent).not.toMatch(/^[a-z]+(\.[a-z]+)+$/);
+  });
+
+  it("menetapkan arah teks yang benar", () => {
+    expect(getHTMLTextDir(locale)).toBe(locale === "ar" ? "rtl" : "ltr");
+  });
+});
+```
+
+Assertion pertama adalah keuntungan generik yang murah: jika pencarian gagal dan library menampilkan key, DOM akan memuat pola seperti `cart.summary.title`. Ini menangkap seluruh kelas bug tanpa perlu memeriksa string tertentu satu per satu.
+
+## Pseudolokalisasi menemukan apa yang terlewat oleh katalog
+
+Tambahkan locale tiruan yang mengubah setiap string, misalnya mengubah `Checkout` menjadi `[!!! Çĥéçķöũţ !!!]`. Kemudian render halaman dalam bahasa tersebut.
+
+Apa pun yang masih muncul dalam bahasa Inggris standar berarti di-hardcode dalam kode sumber. Audit berbasis katalog tidak akan pernah menemukannya karena dari sudut pandang alat, string tersebut belum ada. Tanda kurung siku memiliki fungsi kedua: memperpanjang teks sekitar 30 persen, memperlihatkan tata letak yang rusak sebelum benar-benar diuji dalam bahasa Jerman.
+
+Sebaiknya jalankan ini sebagai pemeriksaan visual atau end-to-end daripada unit test, karena kesalahan ini dapat dilihat secara visual.
+
+## Bentuk jamak membutuhkan pengujian per kategori, bukan per bahasa
+
+Bug bentuk jamak sering luput karena bahasa Inggris hanya memiliki dua bentuk dan sebagian besar pengembang hanya menguji bentuk tersebut. Bahasa Polandia memiliki empat, dan bahasa Arab memiliki enam kategori bentuk jamak.
+
+```ts fileName="plural.test.ts"
+// Bahasa Arab menguji zero, one, two, few, many, other.
+describe.each([0, 1, 2, 3, 11, 100])("jumlah %i", (count) => {
+  it("menghasilkan string tidak kosong dalam bahasa Arab", () => {
+    expect(formatItems(count, "ar")).not.toBe("");
+  });
+});
+```
+
+Pilihlah angka yang mencakup setiap kategori CLDR untuk bahasa paling kompleks alih-alih menguji 1 dan 2 di semua tempat. `Intl.PluralRules` memberi tahu kategori dari suatu angka, sehingga Anda dapat menentukan sampel pengujian tanpa menebak-nebak. Selengkapnya mengenai kategori ini dalam [artikel format pesan ICU](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/icu_message_format.md).
+
+## Jebakan snapshot
+
+Snapshot dan i18n adalah paduan yang buruk. Snapshot dari komponen yang dilokalkan mencatat setiap string di dalamnya: ketika seorang penerjemah memperbaiki kesalahan ketik dalam bahasa Portugis, tes yang sebelumnya hijau berubah merah, dalam file yang tidak dapat dinilai oleh reviewer. Setelah ketiga kalinya, seseorang akan menjalankan `-u` tanpa membaca diff, dan snapshot kehilangan maknanya.
+
+Jika Anda ingin menggunakan snapshot, lakukan hanya dalam satu locale dan perlakukan sebagai pemeriksaan struktural daripada pemeriksaan konten. Semua yang spesifik untuk locale harus diuji dengan assertion eksplisit.
+
+## Uji negosiasi locale, bukan hanya proses rendering
+
+Bug i18n paling umum di produksi bukanlah teks yang hilang. Melainkan terpilihnya locale yang salah: URL menunjukkan `/fr/`, klien membaca `navigator.language`, dan keduanya tidak cocok.
+
+Uji urutan penyelesaian locale secara langsung sebagai fungsi murni, terpisah dari komponen:
+
+```ts fileName="locale-resolution.test.ts"
+it("memprioritaskan URL daripada preferensi yang tersimpan", () => {
+  expect(resolveLocale({ url: "/fr/about", stored: "de", header: "ja" })).toBe(
+    "fr"
+  );
+});
+
+it("jatuh kembali ke header ketika URL tidak memiliki prefix", () => {
+  expect(resolveLocale({ url: "/about", stored: null, header: "ja" })).toBe(
+    "ja"
+  );
+});
+```
+
+Ini adalah tes i18n paling bernilai tinggi yang paling sering hilang dalam codebase, dan tes ini sama sekali tidak memerlukan DOM.
+
+## Apa yang harus dijalankan dan di mana
+
+- **Unit**: Negosiasi locale, formatter, kategori bentuk jamak. Cepat, tanpa DOM.
+- **Komponen**: Satu render berbasis provider per locale, memvalidasi role dan ketiadaan key mentah.
+- **Cakupan**: Satu tes berbasis data yang memastikan tidak ada locale wajib yang hilang.
+- **Visual atau E2E**: Pemeriksaan pseudolokalisasi dan satu halaman RTL, karena masalah tersebut bersifat visual.
+
+Pertahankan tiga yang pertama di pipeline CI pada setiap commit. Yang terakhir hemat dijalankan pada build malam hari dan mahal jika dijalankan di setiap push.
+
+## Kesalahan umum
+
+- **Menegaskan teks literal di mana-mana.** Memastikan suite pengujian dihapus dalam beberapa bulan.
+- **Mengambil snapshot komponen yang dilokalkan.** Penerjemah merusak build dan reviewer menyetujui tanpa membaca.
+- **Hanya menguji locale default.** Satu-satunya locale yang mustahil hilang.
+- **Hanya menguji 1 dan 2 untuk bentuk jamak.** Melewatkan kategori yang tidak ada dalam bahasa Inggris.
+- **Membuat mock dari library i18n.** Anda hanya menguji bahwa mock Anda mengembalikan string.
+- **Tidak pernah menguji logika negosiasi locale.** Masalah paling umum di dunia nyata dan paling mudah diuji.
+
+## Pelajari lebih lanjut
+
+- [Menguji konten Anda: audit CLI, API programatik, dan asersi UI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/testing.md)
+- [Plugin ESLint: mendeteksi string hardcoded dan konten yang tidak terpakai](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/eslint.md)
+- [Formatter dan utilitas locale, termasuk `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/formatters.md)
+- [Laporan benchmark antar berbagai framework](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/benchmark/index.md)
+- [Adapter kompatibilitas react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compat/react-i18next.md)
+- [Cara mendeteksi terjemahan yang hilang](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/detecting_missing_translations.md)
+- [Format pesan ICU: bentuk jamak, select, dan skeleton](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/icu_message_format.md)

package/blog/id/intlayer_with_i18next.md

@@ -74,15 +74,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/blog/id/intlayer_with_next-i18next.md

@@ -67,15 +67,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/blog/id/intlayer_with_next-intl.md

@@ -69,15 +69,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/blog/id/intlayer_with_react-i18next.md

@@ -68,15 +68,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/blog/id/intlayer_with_react-intl.md

@@ -66,15 +66,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/blog/id/intlayer_with_vue-i18n.md

@@ -68,15 +68,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.

package/blog/id/is_i18next_outdated.md

@@ -0,0 +1,317 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: Apakah i18next Sudah Ketinggalan Zaman di Tahun 2026?
+description: i18next memberdayakan jutaan situs web, tetapi arsitektur runtime buatan 2011 mulai menunjukkan usianya. Analisis ukuran bundle, batas tree-shaking, dan laju inovasi.
+keywords:
+  - i18next
+  - react-i18next
+  - next-i18next
+  - Intlayer
+  - Internasionalisasi
+  - i18n
+  - Ukuran bundle
+  - Blog
+slugs:
+  - blog
+  - is-i18next-outdated
+author: aymericzip
+---
+
+# Apakah i18next Sudah Ketinggalan Zaman di Tahun 2026?
+
+`i18next` diluncurkan pada tahun 2011, jauh sebelum komponen React, bundling Webpack, atau TypeScript menjadi standar umum. Pustaka ini mendominasi ekosistem karena fleksibilitas dan jangkauannya yang luas, memiliki plugin untuk hampir setiap tech stack, dan solusi StackOverflow untuk setiap kendala.
+
+Proyek ini tidak ditinggalkan, patch perbaikan masih rutin dirilis. Namun, ada perbedaan besar antara menjaga mesin lawas tetap berjalan dengan berkembang aktif mengikuti arsitektur frontend modern.
+
+Dalam beberapa tahun terakhir, ekosistem frontend telah beralih ke kompilasi saat build time, React Server Components (RSC), tree-shaking agresif, dan alur kerja berbasis AI. Sementara itu, inti dari i18next tetap sama seperti satu dekade lalu: sebuah runtime singleton yang mencocokkan string key di sisi klien.
+
+<TOC/>
+
+## Poin Utama
+
+**Mode pemeliharaan:**
+
+Sepanjang 12 bulan terakhir, `next-i18next` mencatatkan ~63 commit (sekitar satu per minggu) dan `react-i18next` ~157 commit, yang sebagian besar hanya berupa pembaruan dependensi dan perbaikan kecil.
+
+**Beban runtime yang berat:**
+
+`react-i18next` dan `next-i18next` menambahkan ~17–18 KB gzipped (~60 KB minified) sebelum merender satu kata terjemahan pun, hampir 4 kali lipat lebih besar dibanding `next-intlayer` (~4.7 KB).
+
+**Kebocoran konten terjemahan:**
+
+Pada konfigurasi statis bawaan, hingga **89.8%** data lokalisasi yang dikirimkan ke suatu halaman sebenarnya milik rute lain atau bahasa yang sedang tidak aktif.
+
+**Tree-shaking mustahil dilakukan:**
+
+Pemanggilan string dinamis seperti `t("home.hero.title")` tidak dapat dianalisis secara statis oleh bundler, sehingga file JSON utuh terpaksa dimasukkan ke bundle klien.
+
+**Model bisnis:**
+
+Pengelola menjalankan platform komersial Locize. Mengintegrasikan alur terjemahan AI lokal gratis langsung ke dalam CLI akan berbenturan langsung dengan sumber pendapatan utama mereka.
+
+## Pemeliharaan vs. Evolusi Aktif
+
+Bintang di GitHub mencerminkan popularitas historis, bukan dinamika arsitektural saat ini.
+
+| Repositori              | Bintang                                                                                                                                                    | Total commit                                                                                                                                                            | Commit / tahun                                                                                                                                                         | Commit terakhir                                                                                                                                  |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `i18next/i18next`       | [![stars](https://img.shields.io/github/stars/i18next/i18next?style=for-the-badge&label=stars)](https://github.com/i18next/i18next/stargazers)             | [![commits](https://img.shields.io/github/commit-activity/t/i18next/i18next?style=for-the-badge&label=commits)](https://github.com/i18next/i18next/commits)             | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/i18next/commits)             | [![last](https://img.shields.io/github/last-commit/i18next/i18next?style=for-the-badge)](https://github.com/i18next/i18next/commits)             |
+| `i18next/react-i18next` | [![stars](https://img.shields.io/github/stars/i18next/react-i18next?style=for-the-badge&label=stars)](https://github.com/i18next/react-i18next/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/i18next/react-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/react-i18next/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/react-i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/react-i18next/commits) | [![last](https://img.shields.io/github/last-commit/i18next/react-i18next?style=for-the-badge)](https://github.com/i18next/react-i18next/commits) |
+| `i18next/next-i18next`  | [![stars](https://img.shields.io/github/stars/i18next/next-i18next?style=for-the-badge&label=stars)](https://github.com/i18next/next-i18next/stargazers)   | [![commits](https://img.shields.io/github/commit-activity/t/i18next/next-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/next-i18next/commits)   | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/next-i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/next-i18next/commits)   | [![last](https://img.shields.io/github/last-commit/i18next/next-i18next?style=for-the-badge)](https://github.com/i18next/next-i18next/commits)   |
+| `aymericzip/intlayer`   | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers)     | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits)     | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits)     | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits)     |
+
+Aktivitas pengembangan selama 12 bulan terakhir:
+
+| Proyek          | Total commit | 12 bulan terakhir | Fokus utama                          |
+| --------------- | ------------ | ----------------- | ------------------------------------ |
+| `next-i18next`  | 1.311        | **63**            | Kompatibilitas Next.js dan bug fix   |
+| `react-i18next` | 1.988        | **157**           | Definisi tipe dan pemeliharaan       |
+| `i18next` core  | 2.626        | **259**           | Patch minor                          |
+| Intlayer        | 7.156        | **4.343**         | Kompiler, perkakas IDE, dan mesin AI |
+
+[![Star History Chart](https://api.star-history.com/chart?repos=i18next%2Fi18next%2Ci18next%2Freact-i18next%2Ci18next%2Fnext-i18next%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#i18next/i18next&i18next/react-i18next&i18next/next-i18next&aymericzip/intlayer)
+
+Pustaka yang matang memang menawarkan stabilitas. Namun standar perkakas i18n telah berubah: bundler modern memangkas teks tak terpakai saat build, model bahasa (LLM) menerjemahkan langsung di pipeline CI, dan editor terintegrasi dengan Language Server (LSP) serta AI agent. Arsitektur i18next yang murni mengandalkan runtime kesulitan mengadopsi kemajuan ini.
+
+## Mengukur Beban pada Bundle
+
+<I18nBenchmark framework="tanstack" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Diuji pada build produksi dengan 10 rute dan 10 bahasa menggunakan kompresi gzip. Rincian lengkap ada di [laporan benchmark i18n](https://intlayer.org/id/doc/benchmark).
+
+### Beban Dasar Pustaka
+
+Ukuran awal sebelum menambahkan konten terjemahan apa pun:
+
+| Pustaka                | Gzipped    | Minified    |
+| ---------------------- | ---------- | ----------- |
+| `next-i18next@16.0.5`  | 17.8 KB    | 61.2 KB     |
+| `react-i18next@17.0.2` | 17.3 KB    | 59.8 KB     |
+| `intlayer@8.7.12`      | **4.7 KB** | **12.8 KB** |
+
+### Bobot Halaman dan Kebocoran Data
+
+Pengujian di lingkungan React / TanStack Start (strategi statis):
+
+| Pustaka               | Rata-rata JS/hlm (gz) | Kebocoran bahasa | Kebocoran hlm lain | Rata-rata komponen (gz) | Hidrasi     |
+| --------------------- | --------------------- | ---------------- | ------------------ | ----------------------- | ----------- |
+| `react-i18next`       | 180.3 KB              | **50.0%**        | **89.8%**          | 24.3 KB                 | 85.1 ms     |
+| Intlayer              | **127.8 KB**          | 50.0%            | **0.8%**           | **7.1 KB**              | **24.1 ms** |
+| Intlayer (scoped dyn) | **118.1 KB**          | **0.0%**         | **0.8%**           | **4.6 KB**              | 23.7 ms     |
+
+Pada Next.js:
+
+| Pustaka            | Rata-rata JS/hlm (gz) | Kebocoran hlm lain | Rata-rata komponen (gz) |
+| ------------------ | --------------------- | ------------------ | ----------------------- |
+| Dasar (tanpa i18n) | 150.8 KB              | 0.0%               | 0.7 KB                  |
+| `next-i18next`     | **227.5 KB**          | **89.8%**          | 24.5 KB                 |
+| `next-intlayer`    | **152.1 KB**          | **0.0%**           | **7.2 KB**              |
+
+### Temuan Utama
+
+**Beban halaman:**
+
+Di Next.js, `next-i18next` menambahkan **76.7 KB gzipped** dibanding aplikasi dasar (+50%). Sedangkan `next-intlayer` hanya menambah 1.3 KB.
+
+**Kebocoran konten:**
+
+Secara default, sekitar **90% teks terjemahan** yang dikirim ke suatu rute sebenarnya adalah milik halaman lain. Membagi namespace secara manual memakan waktu dan rawan kelalaian.
+
+**Waktu hidrasi:**
+
+Komponen dengan `react-i18next` membutuhkan waktu **85 ms** untuk hidrasi, berbanding **24 ms** pada Intlayer. Mengirimkan struktur JSON besar ke komponen klien memperlambat interaktivitas awal.
+
+## Mengapa i18next Berat?
+
+### Fitur Runtime yang Menumpuk
+
+Bekerja seutuhnya di browser mengharuskan pemuatan semua mekanisme sejak awal: interpolasi, aturan jamak, penanganan konteks, formatter, dan event bus. Bahkan teks paling sederhana sekalipun menanggung biaya sistem secara penuh.
+
+### String Key Dinamis Menghalangi Tree-Shaking
+
+Karena key seperti `"hero.title"` dievaluasi pada saat runtime, bundler tidak dapat mendeteksi teks mana yang benar-benar digunakan. String yang tidak terpakai pun tetap berada di dalam bundle.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="i18next" value="i18next">
+
+```tsx fileName="Component.tsx"
+const { t } = useTranslation("home");
+
+return <h1>{t("hero.title")}</h1>;
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```tsx fileName="Hero.tsx"
+const { title } = useIntlayer("hero");
+
+return <h1>{title}</h1>;
+```
+
+  </Tab>
+</Tabs>
+
+[Kompiler Intlayer](https://intlayer.org/id/doc/compiler) memeriksa bagian mana dari `Hero.tsx` yang benar-benar dipanggil dan membuang konten yang tidak terpakai sebelum bundle klien dibuat. Pelajari lebih lanjut di [optimasi bundle](https://intlayer.org/id/doc/concept/bundle-optimization).
+
+## Pengalaman Pengembang (DX)
+
+### JSON Terpisah vs. Ko-Lokasi
+
+Pada i18next, terjemahan diletakkan di direktori JSON yang terpisah jauh dari kode. Intlayer memungkinkan penempatan file deklarasi konten berdampingan langsung dengan komponen:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="i18next" value="i18next">
+
+```json fileName="locales/en/hero.json"
+{
+  "title": "Ship in every language"
+}
+```
+
+```json fileName="locales/id/hero.json"
+{
+  "title": "Rilis dalam setiap bahasa"
+}
+```
+
+```tsx fileName="Hero.tsx"
+import { useTranslation } from "react-i18next";
+
+export const Hero = () => {
+  const { t } = useTranslation("hero");
+  return <h1>{t("title")}</h1>;
+};
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      en: "Ship in every language",
+      id: "Rilis dalam setiap bahasa",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```tsx fileName="Hero.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export const Hero = () => {
+  const { title } = useIntlayer("hero");
+  return <h1>{title}</h1>;
+};
+```
+
+  </Tab>
+</Tabs>
+
+Jika Anda memindahkan atau menghapus `Hero.tsx`, file kontennya akan ikut berpindah atau terhapus secara bersamaan.
+
+### Autocomplete vs. Keamanan Tipe Ketat
+
+Mendeklarasikan `CustomTypeOptions` memberi saran kode di editor, tetapi tidak memverifikasi kelengkapan terjemahan. Menghapus key dari `id/hero.json` tidak akan membatalkan build, melainkan hanya menampilkan fallback saat runtime.
+
+Intlayer menghasilkan tipe data langsung dari deklarasi konten, dan mode [`strictMode`](https://intlayer.org/id/doc/concept/configuration) akan langsung menghentikan build jika ada terjemahan yang hilang pada bahasa apa pun.
+
+### Ekosistem Alat Bantu
+
+| Fitur                     | Ekosistem i18next      | Intlayer                                                              |
+| ------------------------- | ---------------------- | --------------------------------------------------------------------- |
+| **Ekstensi VS Code**      | Hanya pihak ketiga     | ✅ [Ekstensi resmi](https://intlayer.org/id/doc/vs-code-extension)    |
+| **Language Server (LSP)** | ❌ Tidak ada           | ✅ [LSP khusus](https://intlayer.org/id/doc/lsp)                      |
+| **Server MCP (untuk AI)** | ❌ Tidak ada           | ✅ [Server MCP bawaan](https://intlayer.org/id/doc/mcp-server)        |
+| **Skill Agen AI**         | ❌ Tidak ada           | ✅ [Skill siap pakai](https://intlayer.org/id/doc/agent_skills)       |
+| **CMS Visual in-context** | Locize (SaaS berbayar) | ✅ [Gratis & Open Source](https://intlayer.org/id/doc/concept/editor) |
+
+Keberadaan server LSP dan MCP membuat AI coding assistant memahami struktur terjemahan proyek secara menyeluruh.
+
+## Alur Terjemahan dan Model Locize
+
+Locize adalah layanan komersial yang dikelola oleh pembuat i18next. Keberlanjutan open source itu penting, tetapi struktur ini memicu benturan kepentingan: sebuah pustaka yang pendapatannya bergantung pada platform terjemahan berbayar tidak memiliki dorongan kuat untuk merilis perkakas terjemahan AI lokal gratis langsung di dalam CLI.
+
+Intlayer memilih pendekatan terbuka:
+
+- Perintah [`intlayer fill`](https://intlayer.org/id/doc/concept/auto-fill) melengkapi terjemahan yang hilang di terminal atau CI memakai API key OpenAI, Anthropic, Mistral, atau Gemini milik Anda sendiri.
+- [Intlayer CMS](https://intlayer.org/id/doc/concept/cms) bersifat open source dan dapat di-hosting mandiri melalui Docker Compose.
+- Kompiler, CLI, editor, dan CMS dirilis di bawah lisensi Apache 2.0.
+
+## Kapan i18next Masih Menjadi Pilihan Tepat?
+
+<AccordionGroup>
+<Accordion header="Proyek lawas yang stabil">
+
+Jika aplikasi saat ini berjalan baik dan ukuran bundle bukan menjadi penghambat, migrasi tidak perlu dilakukan terburu-buru.
+
+</Accordion>
+<Accordion header="Platform khusus">
+
+Koleksi plugin i18next yang masif mendukung platform unik (Electron, aplikasi lawas jQuery, bridge native khusus) yang belum tentu didukung langsung oleh kompiler modern.
+
+</Accordion>
+<Accordion header="Basis komunitas yang luas">
+
+Dokumentasi tanya-jawab bertahun-tahun di StackOverflow dan GitHub memudahkan penyelesaian kasus-kasus langka.
+
+</Accordion>
+</AccordionGroup>
+
+## Bagaimana Meningkatkan Konfigurasi i18next yang Sudah Ada?
+
+Intlayer menyediakan paket kompatibilitas drop-in yang secara akurat mereplikasi tanda tangan fungsi pustaka i18next (`i18next`, `react-i18next`, dan `next-i18next`). Anda tidak perlu menulis ulang komponen untuk mendapatkan efisiensi dari arsitektur berbasis kompiler modern.
+
+Pemasangan dilakukan hanya dengan satu baris perintah:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+CLI interaktif ini secara otomatis:
+
+1. Memasang paket kompatibilitas `@intlayer/i18next`.
+2. Mengonfigurasi alias bundler sehingga impor yang sudah ada (`useTranslation`, `Trans`, `t`) secara mulus dialihkan ke Intlayer, sehingga pustaka lama dapat dihapus dari `package.json`.
+3. Mengaktifkan diagnostik Language Server (LSP) di editor, pemangkasan bundle saat build (tree-shaking penuh), serta alur kerja terjemahan AI lokal tanpa perlu perombakan besar.
+
+Untuk panduan langkah demi langkah yang lebih mendalam, simak referensi kami:
+
+- **Lapisan Kompatibilitas:** Pertahankan kode lama Anda dengan adaptor untuk [i18next](https://intlayer.org/id/doc/compatibility/i18next), [react-i18next](https://intlayer.org/id/doc/compatibility/react-i18next), dan [next-i18next](https://intlayer.org/id/doc/compatibility/next-i18next).
+- **Panduan Migrasi Kamus:** Konversikan file JSON lama menjadi kamus bertipe: [dari i18next](https://intlayer.org/id/doc/migration/i18next), [dari react-i18next](https://intlayer.org/id/doc/migration/react-i18next), atau [dari next-i18next](https://intlayer.org/id/doc/migration/next-i18next).
+- **Pola Hibrida:** Pertahankan runtime i18next sembari [menggunakan Intlayer bersama i18next](https://intlayer.org/id/blog/intlayer-with-i18next) untuk mendapatkan validasi tipe dan terjemahan AI lokal.
+
+Periksa ukuran bundle dan kebocoran konten situs Anda dengan [Pemindai SEO i18n gratis](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Artikel Terkait
+
+- [Benchmark Next.js i18n: Analisis Performa Mendalam](https://intlayer.org/id/doc/benchmark/nextjs)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/id/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [Apakah next-intl Sudah Ketinggalan Zaman di Tahun 2026?](https://intlayer.org/id/blog/is-next-intl-outdated)
+- [Internasionalisasi Berbasis Kompiler vs Deklaratif](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)