@intlayer/docs 9.5.6 → 9.5.8

package/blog/id/lingui_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "Lingui vs Intlayer: Tolok Ukur & Perbandingan 2026"
 description: "Dua pustaka i18n berbasis kompiler diuji pada Next.js dan TanStack Start. Ukuran bundle, kebocoran konten, ukuran komponen, hidrasi, reaktivitas pergantian lokal, dan pengalaman pengembang."
 keywords:
@@ -24,6 +24,8 @@ author: aymericzip
 
 # Lingui VS Intlayer | Tolok Ukur Internasionalisasi (i18n) React & Next.js
 
+![JavaScript i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Lingui dan Intlayer adalah dua pustaka dalam tolok ukur ini yang mengandalkan **kompiler** daripada runtime murni. Lingui mengekstrak pesan dari makro saat build time dan mengompilasi katalog per lokal. Intlayer mengompilasi kamus per komponen dan melakukan tree-shake per lokal. Di atas kertas keduanya seharusnya sebanding. Angka-angka berikut menunjukkan di mana keduanya berbeda.
 
 Data berasal dari [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), sebuah rangkaian pengujian sumber terbuka yang membangun aplikasi yang sama dengan masing-masing pustaka dan mencatat apa yang sebenarnya diunduh serta dieksekusi oleh peramban.
@@ -96,6 +98,10 @@ Untuk setiap build, pengujian mencatat:
 
 ### Hasil pada Next.js
 
+Pilih metrik dan pustaka yang Anda minati:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Pustaka               | Strategi       | Ukuran Lib (gz) | Rata-rata JS Halaman (gz) | Bocor Lokal | Bocor Halaman | Rata-rata Komponen (gz) | Reaktivitas E2E | Hidrasi |
 | --------------------- | -------------- | --------------: | ------------------------: | ----------: | ------------: | ----------------------: | --------------: | ------: |
 | **base** (tanpa i18n) | -              |          0.0 KB |                  141.0 KB |        0.0% |          0.0% |                  0.9 KB |         13.4 ms | 11.8 ms |
@@ -114,6 +120,15 @@ Untuk setiap build, pengujian mencatat:
 - **Fallback lokal sumber bocor.** Bahkan dalam pengaturan yang dioptimalkan, **3-15% string `en` tetap terkirim di dalam halaman `fr`**. Makro Lingui menjaga pesan sumber tetap tersedia sebagai fallback, sehingga ikut masuk ke dalam bundle bersama terjemahan. Intlayer menyelesaikan fallback pada saat build dan hanya mengirimkan lokal yang aktif.
 - **Ukuran komponen membengkak pada `scoped-dynamic`.** Setiap komponen yang dikompilasi secara terisolasi rata-rata berukuran **152.6 KB**, karena katalog setiap rute dapat diakses dari komponen yang mengimpornya. Komponen yang sama dengan `useIntlayer()` hanya berukuran rata-rata **6.9 KB**.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tabel lengkap, setiap pustaka dan setiap strategi, dalam [laporan tolok ukur Next.js](https://intlayer.org/id/doc/benchmark/nextjs).
+
 ### Hasil pada TanStack Start
 
 | Pustaka                     | Strategi       | Ukuran Lib (gz) | Rata-rata JS Halaman (gz) | Bocor Lokal | Bocor Halaman | Rata-rata Komponen (gz) | Reaktivitas E2E | Hidrasi |
@@ -135,8 +150,19 @@ Untuk setiap build, pengujian mencatat:
 - **Baris `static` Intlayer sudah memiliki 0% kebocoran halaman** karena hanya kamus yang diimpor oleh komponen halaman yang dibundel. Satu baris konfigurasi (`importMode: 'dynamic'`) menghapus kebocoran lokal juga.
 - **`@intlayer/lingui`** mempertahankan sintaks makro Lingui dan menyajikannya dari kamus Intlayer. Pendekatan ini mengorbankan sedikit ukuran halaman (137 KB, karena runtime makro tetap ada) demi komponen yang lebih kecil (12.8 KB) dan hidrasi yang lebih cepat daripada Lingui bawaan. Ini adalah langkah migrasi, bukan tujuan akhir.
 
+<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;"
+/>
+
+> Tabel lengkap dalam [laporan tolok ukur TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack).
+
 ## Mengapa ada perbedaan? Dua kompiler, dua unit kerja
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Kedua pustaka melakukan kompilasi. Perbedaannya terletak pada **apa** yang mereka kompilasi.
 
 **Lingui mengompilasi katalog.** Makro dalam kode sumber Anda diekstrak ke dalam file `.po` per lokal, lalu dikompilasi menjadi modul JS per lokal. Unit kerjanya adalah **lokal**. Membaginya lebih lanjut, berdasarkan rute atau komponen, berarti membuat beberapa katalog, mengonfigurasi `lingui.config.ts` untuk mengekstrak masing-masing dari kumpulan file yang berbeda, dan memuat katalog yang tepat di setiap rute. Instans runtime `I18n` bersifat global; setiap pemanggilan `useLingui()` menghubungkan komponen ke instans tersebut.
@@ -176,7 +202,9 @@ Kedua pustaka melakukan kompilasi. Perbedaannya terletak pada **apa** yang merek
             └── about.content.ts
 ```
 
-Itulah mengapa pola `scoped-dynamic` adalah output bawaan bagi Intlayer dan merupakan proyek konfigurasi manual yang rumit bagi Lingui.
+Itulah mengapa pola `scoped-dynamic` adalah output bawaan bagi Intlayer dan merupakan proyek konfigurasi manual yang rumit bagi Lingui. Kesenjangan melebar pada dua sumbu sekaligus, halaman dan bahasa:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 > Untuk mendapatkan angka pada baris `dynamic`, atur `dictionary.importMode: 'dynamic'` di `intlayer.config.ts`. Lihat [panduan optimasi bundle](https://intlayer.org/id/doc/concept/bundle-optimization).
 
@@ -184,7 +212,8 @@ Itulah mengapa pola `scoped-dynamic` adalah output bawaan bagi Intlayer dan meru
 
 ### Pengaturan
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="lingui.config.ts"
 import { defineConfig } from "@lingui/cli";
@@ -215,7 +244,8 @@ export const loadCatalog = async (locale: string) => {
 
 Kemudian tambahkan `@lingui/babel-plugin-lingui-macro` (atau `@lingui/swc-plugin`) ke bundler, jalankan `lingui extract` setelah mengedit kode sumber, jalankan `lingui compile` sebelum build, dan bungkus hierarki aplikasi dengan `<I18nProvider i18n={i18n}>`.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -232,9 +262,12 @@ export default config;
 
 Tambahkan `intlayer()` ke `vite.config.ts` (atau `withIntlayer()` ke `next.config.ts`) dan bungkus hierarki komponen dengan `<IntlayerProvider>`. Tidak ada langkah ekstrak atau kompilasi terpisah: kamus dibangun secara otomatis saat bundler berjalan.
 
+</Tab>
+</Tabs>
 ### Komponen
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```tsx fileName="src/components/Counter.tsx"
 import { useState } from "react";
@@ -258,7 +291,8 @@ export const Counter = () => {
 
 Teks bahasa Inggris berada di dalam komponen; teks bahasa Prancis berada di `src/locales/fr/messages.po` di bawah ID ter-hash, setelah `lingui extract` dijalankan. Jika Anda lupa menjalankannya atau lupa menjalankan `compile`, aplikasi akan secara diam-diam kembali ke bahasa Inggris.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -297,11 +331,14 @@ export const Counter = () => {
 
 Kedua lokal berada dalam satu file di samping komponen. Nilai `fr` yang hilang akan memicu error saat build, dan kunci yang salah akan menjadi error TypeScript.
 
+</Tab>
+</Tabs>
 ### Di luar komponen
 
 Metadata, loader, fungsi server: di mana saja tanpa hierarki React.
 
-**Lingui**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="Lingui" value="lingui">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { setupI18n } from "@lingui/core";
@@ -324,7 +361,8 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 
 Instans `I18n` baru dibuat per pemanggilan, katalog yang tepat dimuat secara manual, serta menggunakan `msg` + `i18n._()` daripada `t`. Sebagaimana dicatat dalam [catatan tolok ukur](https://github.com/intlayer-org/benchmark-bloom/blob/main/report/NOTE.md), mengetahui kapan harus menggunakan `t`, `` t` ` ``, `i18n.t()`, `msg`, atau `<Trans>` sering kali membingungkan.
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/routes/$locale/about.tsx"
 import { getIntlayer } from "intlayer";
@@ -336,6 +374,9 @@ export const loader = async ({ params }: { params: { locale: string } }) => {
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## Pertahankan makro Lingui, dapatkan kamus Intlayer
 
 `@intlayer/lingui` adalah adaptor pengganti langsung untuk `@lingui/core` dan `@lingui/react`. Makro tetap dikompilasi seperti biasa; pemanggilan runtime `i18n._()` yang dihasilkannya disajikan langsung dari kamus Intlayer, dengan plugin sinkronisasi `.po` yang menjaga katalog lama Anda tetap sinkron. Bentuk jamak dan seleksi ICU dirender secara identik.
@@ -353,16 +394,82 @@ Biarkan `@lingui/babel-plugin-lingui-macro` / `@lingui/swc-plugin` tetap berada
 
 ## Kapan harus memilih yang mana?
 
-- **Pilih Lingui** jika Anda menginginkan **ICU MessageFormat** dengan makro bertipe, penerjemah Anda bekerja dengan file **`.po`** dalam alur TMS yang sudah ada, Anda menyukai string sumber inline di JSX, dan tim Anda terbiasa mengelola alur kerja ekstrak / kompilasi / pemisahan katalog. Ukuran JS per halamannya sangat kompetitif setelah lazy loading dikonfigurasi.
-- **Pilih Intlayer** jika Anda menginginkan **konten dengan cakupan komponen**, **TypeScript yang ketat**, **deteksi error kunci yang hilang saat build**, **tree-shaking dan lazy loading otomatis tanpa konfigurasi**, komponen yang ringan, hidrasi cepat, pergantian lokal instan, dan alat editorial bawaan (Visual Editor, CMS, terjemahan AI, server MCP). Sangat relevan untuk codebase modular dan sistem desain berskala besar.
-- **Pilih `@intlayer/lingui`** jika Anda saat ini menggunakan Lingui dan ingin bermigrasi ke kamus Intlayer secara bertahap tanpa mengubah makro.
+<AccordionGroup>
+<Accordion header="Pilih Lingui">
+
+Anda menginginkan **ICU MessageFormat** dengan makro bertipe, penerjemah Anda bekerja di **`.po`** dengan alur TMS yang ada, Anda lebih suka string sumber sebaris di JSX, dan tim Anda terbiasa mengelola alur kerja ekstrak / kompilasi / pemisahan katalog. JS per halamannya kompetitif setelah pemuatan lambat (lazy loading) diatur.
+
+</Accordion>
+<Accordion header="Pilih Intlayer">
+
+Anda menginginkan **konten dengan cakupan komponen**, **TypeScript yang ketat**, **kesalahan kunci yang hilang saat waktu build**, **tree-shaking dan pemuatan lambat tanpa usaha**, komponen kecil, hidrasi cepat, pergantian bahasa instan, dan alat editorial bawaan ([Editor Visual](https://intlayer.org/id/doc/concept/editor), [CMS](https://intlayer.org/id/doc/concept/cms), [terjemahan AI](https://intlayer.org/id/doc/concept/auto-fill), [server MCP](https://intlayer.org/id/doc/mcp-server)). Sangat relevan untuk basis kode modular besar dan sistem desain.
+
+</Accordion>
+<Accordion header="Pilih @intlayer/lingui">
+
+Anda menggunakan Lingui dan ingin beralih ke kamus Intlayer secara bertahap tanpa menyentuh makro. Katalog `.po` Anda tetap menjadi sumber kebenaran melalui [plugin sinkronisasi PO](https://intlayer.org/id/doc/compatibility/lingui). Diukur berdampingan dalam [Lingui vs @intlayer/lingui](https://intlayer.org/id/blog/lingui-vs-intlayer-lingui).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Lingui juga mengompilasi. Mengapa hasilnya sangat berbeda?">
+
+Karena unit kompilasinya berbeda. Lingui mengompilasi **satu katalog per bahasa**: segala sesuatu di bawahnya (katalog per rute, pemuatan lambat, menjaga fallback dari bundel) adalah konfigurasi manual. Intlayer mengompilasi **satu kamus per komponen**, sehingga pemisahan rute menjadi hasil langsung dari build. Itulah mengapa komponen Lingui yang dikompilasi secara terpisah berukuran 58-153 KB dibandingkan 6-8 KB pada Intlayer.
+
+</Question>
+
+<Question title="Mengapa kebocoran bahasa tidak pernah mencapai 0% dengan Lingui?">
+
+Makro mempertahankan pesan sumber tersedia sebagai fallback runtime, sehingga string bahasa Inggris dikirim bersama terjemahannya. Tolok ukur mengukur **3-15% string `en` di dalam halaman `fr`** di setiap pengaturan yang dioptimalkan. Intlayer menyelesaikan fallback pada waktu build dan hanya mengirim bahasa yang aktif.
+
+</Question>
+
+<Question title="Apakah JavaScript per halaman Lingui benar-benar kompetitif?">
+
+Ya, dan di TanStack Start ia menang tipis: 115.2 KB dalam mode `dynamic` dibandingkan 118.6 KB untuk Intlayer. Katalog yang dikompilasi dengan ID hash sangat ringkas. Biaya muncul di tempat lain: hidrasi pada 28-34 ms dibandingkan 11-14 ms, dan pergantian bahasa **42 ms** dalam pengaturan `scoped-dynamic`.
+
+</Question>
+
+<Question title="Apakah saya harus meninggalkan makro untuk bermigrasi?">
+
+Tidak. `@intlayer/lingui` mempertahankan kompilasi `` t`...` ``, `<Trans>`, `msg`, `plural`, `select`, dan `selectOrdinal` seperti sebelumnya; hanya target resolusi `i18n._()` yang berubah. Pertahankan `@lingui/babel-plugin-lingui-macro` atau `@lingui/swc-plugin` dalam build. Lihat [dokumentasi kompatibilitas Lingui](https://intlayer.org/id/doc/compatibility/lingui).
+
+</Question>
+
+<Question title="Bagaimana dengan langkah ekstraksi dan kompilasi?">
+
+Langkah-langkah tersebut tetap ada untuk makro, dan hilang untuk konten asli Intlayer. Kamus `.content.ts` dibangun saat bundler berjalan, tanpa perintah CLI terpisah, dan [`intlayer test`](https://intlayer.org/id/doc/concept/cli) menggagalkan CI jika ada kunci yang hilang alih-alih secara diam-diam kembali ke string sumber.
+
+</Question>
+
+</FAQ>
 
 ## Perbandingan terkait
 
-- [next-intl vs Intlayer](https://intlayer.org/id/blog/next-intl-vs-intlayer) (tolok ukur yang sama)
-- [i18next vs Intlayer](https://intlayer.org/id/blog/i18next-vs-intlayer) (tolok ukur yang sama)
-- [Tolok ukur vue-i18n vs Intlayer](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-benchmark) (tolok ukur yang sama)
-- [Kompiler vs i18n deklaratif](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)
+Tolok ukur yang sama, pustaka lain:
+
+- [next-intl vs Intlayer](https://intlayer.org/id/blog/next-intl-vs-intlayer)
+- [i18next vs Intlayer](https://intlayer.org/id/blog/i18next-vs-intlayer)
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-benchmark)
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/id/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/id/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+Lebih lanjut:
+
+- [Lingui vs @intlayer/lingui](https://intlayer.org/id/blog/lingui-vs-intlayer-lingui), adaptor diukur pada aplikasi yang sama
+- [Compiler-driven vs declarative i18n](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)
+- [Per-component vs centralized i18n](https://intlayer.org/id/blog/per-component-vs-centralized-i18n)
+- [ICU message format explained](https://intlayer.org/id/blog/icu-message-format)
+
+Dokumen referensi:
+
+- [Laporan tolok ukur Next.js](https://intlayer.org/id/doc/benchmark/nextjs) dan [laporan tolok ukur TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack)
+- [Compat adapter: Lingui](https://intlayer.org/id/doc/compatibility/lingui)
+- [Optimalisasi bundel](https://intlayer.org/id/doc/concept/bundle-optimization) dan [kompiler Intlayer](https://intlayer.org/id/doc/compiler)
 
 ## Bintang GitHub
 

package/blog/id/next-intl_vs_intlayer-next-intl.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl vs @intlayer/next-intl: API yang Sama, Bundle Berbeda"
 description: Apa yang berubah ketika impor next-intl dari aplikasi Next.js disajikan oleh adapter kompatibilitas @intlayer/next-intl. Ukuran bundle, kebocoran, ukuran komponen dan hidrasi diukur pada kode yang sama, ditambah apa yang adapter pertahankan, abaikan dan tidak dapat gantikan.
 keywords:
@@ -26,6 +26,8 @@ author: aymericzip
 
 # next-intl VS @intlayer/next-intl | API yang Sama, Bundle Berbeda
 
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
+
 `@intlayer/next-intl` adalah compat adapter: ia mengekspos API `next-intl` (`useTranslations`, `getTranslations`, `useLocale`, `t.rich()`, ICU plurals, `NextIntlClientProvider`...) dan melayaninya dari dictionary yang dikompilasi oleh Intlayer. Kode aplikasi tidak berubah. Bundle-nya berubah.
 
 Artikel ini membandingkan keduanya pada aplikasi Next.js yang sama, dibangun sekali dengan `next-intl` dan sekali dengan adapter. Angka-angka berasal dari [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), suite open-source yang mencatat apa yang benar-benar diunduh browser. Jika Anda menginginkan perbandingan `next-intl` vs Intlayer sebagai library, baca [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer). Yang ini tentang apa yang berubah pada adapter ketika Anda menjaga komponen seperti yang sekarang.
@@ -110,6 +112,10 @@ Untuk setiap build, suite merekam:
 
 ### Hasil di Next.js
 
+Pilih metrik dan pustaka yang Anda minati:
+
+<I18nBenchmark framework="nextjs" vertical/>
+
 | Setup                     | Strategi       | Ukuran lib (gz) | Rata-rata JS halaman (gz) | Bocor locale | Bocor halaman | Rata-rata komponen (gz) | Reaktivitas E2E |     Hidrasi |
 | ------------------------- | -------------- | --------------: | ------------------------: | -----------: | ------------: | ----------------------: | --------------: | ----------: |
 | **base** (no i18n)        | -              |          0.0 KB |                  141.0 KB |         0.0% |          0.0% |                  0.9 KB |         13.4 ms |     11.8 ms |
@@ -130,6 +136,15 @@ Untuk setiap build, suite merekam:
 - **Hydration 2 ms lebih cepat** (12.8 vs 14.7 ms): tidak ada message object yang perlu di-deserialize dari RSC payload sebelum React dapat melakukan hydrate.
 - **Adapter bukan runtime native.** `next-intlayer` berada di **141.3 KB**, +0.3 KB di atas base app, dengan runtime 5.5 KB. Adapter membawa surface API `next-intl` (`useFormatter`, `t.rich`, ICU resolver) di atas core Intlayer, sehingga 8.0 KB dan +6 KB per page. Ini adalah bridge, bukan destination.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-nextjs.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tabel lengkap, setiap pustaka dan setiap strategi, dalam [laporan tolok ukur Next.js](https://intlayer.org/id/doc/benchmark/nextjs).
+
 ### Hasil pada TanStack Start (`use-intl`)
 
 `use-intl` adalah core framework-agnostic dari `next-intl`. Adapternya, `@intlayer/use-intl`, mengikuti desain yang sama dengan Vite plugin (`@intlayer/use-intl/plugin`).
@@ -153,11 +168,24 @@ Untuk setiap build, suite merekam:
 - **Pengalihan locale lebih cepat.** Setup `use-intl` yang dioptimalkan membutuhkan **13-21 ms** untuk memperbarui `html[lang]`; adapter membutuhkan **4-9 ms**. Lebih sedikit komponen yang di-render ulang, dan tidak ada yang diambil ulang dari pohon pesan.
 - **`static` menyimpan setiap locale.** Baris `static` adapter menunjukkan kebocoran locale 49,7%, sama seperti Intlayer native dalam mode `static`: semua locale dibundel, hanya kamus halaman yang tersimpan. Satu baris konfigurasi (`importMode: 'dynamic'`) menghilangkannya.
 
+<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;"
+/>
+
+> Tabel lengkap dalam [laporan tolok ukur TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack).
+
 ## Mengapa angka-angka berubah
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Tidak ada yang berubah dalam komponen, jadi keuntungannya berasal sepenuhnya dari apa yang `useTranslations` terikat.
 
-**Dengan `next-intl`**, pengikatan adalah provider. `NextIntlClientProvider` menerima seluruh object `messages` untuk locale; setiap `useTranslations("about")` membacanya. Bundler melihat satu komponen mengimpor satu hook yang membaca satu context, dan tidak dapat mengetahui bahwa hanya branch `about` yang digunakan. Rute di bawah ini semuanya berbagi object message yang sama, jadi kolom page-leak membaca ~90% hingga Anda membagi file sendiri.
+**Dengan `next-intl`**, pengikatan adalah provider. `NextIntlClientProvider` menerima seluruh object `messages` untuk locale; setiap `useTranslations("about")` membacanya. Bundler melihat satu komponen mengimpor satu hook yang membaca satu context, dan tidak dapat mengetahui bahwa hanya branch `about` yang digunakan. Rute di bawah ini semuanya berbagi object message yang sama, jadi kolom page-leak membaca ~90% hingga Anda membagi file sendiri, dan pemborosan tumbuh pada dua sumbu sekaligus, halaman dan bahasa:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -281,25 +309,106 @@ export default withIntlayer(nextConfig);
 
 ## Batasan yang perlu Anda ketahui sebelum memulai
 
-- **Konfigurasi routing bergerak ke `intlayer.config.ts`.** `createNavigation(routing)` dan `createMiddleware(routing)` mempertahankan signature mereka tetapi mengabaikan argumen: locale, locale default, dan strategi prefix berasal dari konfigurasi `routing` Intlayer. Jika Anda menggunakan `pathnames` terlokalisasi dari `next-intl` (`/about` → `/a-propos`), adapter tidak melakukan interpolasi; `routing.rewrite` Intlayer mencakup kasus itu tetapi merupakan perubahan terpisah.
-- **`useTranslations()` tanpa namespace tidak terikat.** Pass optimasi memerlukan namespace statis untuk mengetahui dictionary mana yang harus diimpor. Panggilan kosong masih berfungsi, melalui registry runtime yang mereferensikan setiap dictionary, yang merupakan kebocoran persis yang Anda coba hapus. Berikan namespace.
-- **Adapter tidak gratis.** 8.0 KB runtime versus 5.5 KB untuk `next-intlayer`, dan +6-7 KB per halaman dibandingkan native build. Ini adalah biaya untuk API surface `next-intl`. Jika Anda mencapai titik di mana setiap komponen telah dipindahkan ke `useIntlayer`, lepaskan adapter.
-- **`messages`, `timeZone`, `now` pada provider diabaikan.** Formatter didukung oleh native `Intl` dan hanya locale yang mempengaruhi output mereka; jika Anda bergantung pada forced time zone atau `now` tetap untuk tanggal yang stabil saat hydration, tangani di call site.
+<AccordionGroup>
+<Accordion header="Konfigurasi perutean berpindah ke intlayer.config.ts">
+
+`createNavigation(routing)` dan `createMiddleware(routing)` mempertahankan fungsi mereka tetapi mengabaikan argumen: bahasa, bahasa default, dan strategi prefiks berasal dari konfigurasi `routing` Intlayer. Jika Anda menggunakan `pathnames` terlokalisasi dari `next-intl` (`/about` ke `/a-propos`), adaptor tidak menginterpolasinya; `routing.rewrite` Intlayer mencakup kasus tersebut tetapi merupakan perubahan terpisah.
+
+</Accordion>
+<Accordion header="useTranslations() tanpa namespace tidak terikat">
+
+Tahap pengoptimalan membutuhkan namespace statis untuk mengetahui kamus mana yang harus diimpor. Panggilan tanpa namespace tetap berfungsi melalui registri runtime yang merujuk ke setiap kamus, yang merupakan kebocoran yang coba Anda hapus. Teruskan namespace.
+
+</Accordion>
+<Accordion header="Adaptor tidak sepenuhnya gratis">
+
+Runtime 8.0 KB dibandingkan 5.5 KB untuk `next-intlayer`, dan +6-7 KB per halaman di atas build asli. Ini membayar kompatibilitas API `next-intl`. Jika Anda mencapai titik di mana setiap komponen telah dipindahkan ke `useIntlayer`, hapus adaptor.
+
+</Accordion>
+<Accordion header="messages, timeZone, dan now pada provider diabaikan">
+
+Pemformat didukung oleh `Intl` bawaan dan hanya bahasa yang memengaruhi hasilnya. Jika Anda mengandalkan zona waktu paksa atau `now` tetap untuk tanggal yang stabil saat hidrasi, tangani di titik panggilan. Lihat [pemformatan tanggal, waktu, dan angka](https://intlayer.org/id/blog/date-time-number-formatting-locales).
+
+</Accordion>
+</AccordionGroup>
 
 ## Kapan menggunakan yang mana?
 
-- **Tetap di `next-intl`** jika aplikasi Anda kecil, bundle bukan masalah, dan tim Anda nyaman mengelola namespace dan `pick()` per halaman.
-- **Gunakan `@intlayer/next-intl`** jika Anda saat ini menggunakan `next-intl` dan menginginkan keuntungan bundle, menghindari kebocoran, stabilitas hydration, typed keys, dan tooling CLI / CMS tanpa menulis ulang. Ini adalah entry point yang direkomendasikan untuk setiap codebase `next-intl` yang sudah ada.
-- **Gunakan native (`next-intlayer`)** untuk proyek baru, atau setelah adapter telah menjalankan tugasnya. Ini adalah yang paling ringan dari ketiganya (5.5 KB, +0.3 KB per halaman) dan membuka akses ke synchronous server components, per-component `.content.ts` files, dan full feature set.
+<AccordionGroup>
+<Accordion header="Tetap di next-intl">
+
+Aplikasi Anda kecil, ukuran bundel bukan masalah, dan tim Anda nyaman mengelola namespace dan `pick()` per halaman.
+
+</Accordion>
+<Accordion header="Gunakan @intlayer/next-intl">
+
+Anda menggunakan `next-intl` hari ini dan menginginkan keuntungan bundel, pengurangan kebocoran, dan hidrasi cepat, kunci bertipe, dan alat CLI / CMS tanpa menulis ulang kode. Ini adalah titik awal yang direkomendasikan untuk basis kode `next-intl` yang sudah ada.
+
+</Accordion>
+<Accordion header="Gunakan bawaan (next-intlayer)">
+
+Untuk proyek baru, atau setelah adaptor menyelesaikan tugasnya. Ini adalah yang paling ringan dari ketiganya (5.5 KB, +0.3 KB per halaman) dan membuka komponen server sinkron, file `.content.ts` per komponen, dan rangkaian fitur lengkap. Mulai dengan [Intlayer dengan Next.js](https://intlayer.org/id/doc/environment/nextjs).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Apakah kode aplikasi saya benar-benar tidak tersentuh?">
+
+Pada Next.js, ya untuk komponen: build tolok ukur hanya mengubah `next.config.ts` dan `intlayer.config.ts`. `getRequestConfig` di `src/i18n.ts`, properti `messages` pada provider, dan panggilan `pick()` per halaman menjadi kode mati yang dapat Anda hapus nanti.
+
+</Question>
+
+<Question title="Apa yang terjadi dengan pesan ICU?">
+
+Mereka tetap berfungsi. `t("key", { count })`, `t.rich()`, `t.markup()`, `select`, `selectordinal`, `#`, dan `{ts, date, long}` diselesaikan oleh resolver ICU Intlayer. Lihat [format pesan ICU](https://intlayer.org/id/blog/icu-message-format).
+
+</Question>
+
+<Question title="Mengapa adaptor lebih berat daripada next-intlayer bawaan?">
+
+Ini membawa permukaan API `next-intl` di atas inti Intlayer: `useFormatter`, `t.rich`, resolver ICU, pembantu navigasi. Itu 8.0 KB dibandingkan 5.5 KB, dan +6 KB per halaman. Ini adalah jembatan, bukan tujuan akhir.
+
+</Question>
+
+<Question title="Bisakah saya bermigrasi komponen demi komponen?">
+
+Ya. Komponen mana pun dapat beralih dari `useTranslations("about")` ke `useIntlayer("about")` dengan file `.content.ts` yang diletakkan bersama. Kamus JSON dan `.content.ts` hidup berdampingan dan bergabung.
+
+</Question>
+
+<Question title="Apakah pathnames yang dilokalisasi berfungsi?">
+
+Tidak melalui `pathnames` dari `next-intl`: adaptor menerimanya untuk pengetikan tetapi tidak menginterpolasinya. Gunakan `routing.rewrite` Intlayer sebagai gantinya.
+
+</Question>
+
+</FAQ>
 
 ## Perbandingan terkait
 
-- [next-intl vs Intlayer](https://intlayer.org/blog/next-intl-vs-intlayer) (library-nya, benchmark yang sama)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (series adapter yang sama)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (seri adapter yang sama)
-- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/blog/vue-i18n-vs-intlayer-vue-i18n) (seri adapter yang sama)
-- [Panduan migrasi: next-intl ke Intlayer](https://intlayer.org/doc/migration/next-intl)
-- [Referensi adapter kompatibilitas: next-intl](https://intlayer.org/doc/compatibility/next-intl)
+Seri adaptor yang sama:
+
+- [i18next vs @intlayer/i18next](https://intlayer.org/id/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/id/blog/lingui-vs-intlayer-lingui)
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/id/blog/vue-i18n-vs-intlayer-vue-i18n)
+
+Perbandingan langsung pustaka:
+
+- [next-intl vs Intlayer](https://intlayer.org/id/blog/next-intl-vs-intlayer), tolok ukur yang sama
+- [next-i18next vs next-intl vs Intlayer](https://intlayer.org/id/blog/next-i18next-vs-next-intl-vs-intlayer)
+- [Is next-intl outdated?](https://intlayer.org/id/blog/is-next-intl-outdated)
+
+Dokumen referensi:
+
+- [Compat adapter: next-intl](https://intlayer.org/id/doc/compatibility/next-intl)
+- [Panduan migrasi: next-intl ke Intlayer](https://intlayer.org/id/doc/migration/next-intl)
+- [Laporan tolok ukur Next.js](https://intlayer.org/id/doc/benchmark/nextjs) dan [laporan tolok ukur TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack)
+- [Optimalisasi bundel](https://intlayer.org/id/doc/concept/bundle-optimization) dan [kompiler Intlayer](https://intlayer.org/id/doc/compiler)
+- [Editor Visual](https://intlayer.org/id/doc/concept/editor), [CMS](https://intlayer.org/id/doc/concept/cms), dan [terjemahan AI](https://intlayer.org/id/doc/concept/auto-fill)
 
 ## Kesimpulan