@intlayer/docs 9.5.5 → 9.5.7

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
 

package/blog/id/next-intl_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "next-intl vs Intlayer: Tolok Ukur & Perbandingan 2026"
 description: "Perbandingan mendalam antara next-intl dan Intlayer pada Next.js App Router dan TanStack Start. Ukuran bundle, kebocoran konten, ukuran komponen, hidrasi, dan pengalaman pengembang."
 keywords:
@@ -22,15 +22,15 @@ author: aymericzip
 
 # next-intl VS Intlayer | Tolok Ukur Internasionalisasi (i18n) React & Next.js
 
-`next-intl` adalah pilihan default untuk i18n di Next.js App Router saat ini: integrasi routing yang erat, dukungan penuh ICU MessageFormat, dan pengalaman pengembang yang akrab bagi siapa saja yang terbiasa dengan sistem i18n klasik.
+![next-intl VS Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18next-next-intl-intlayer.webp?raw=true)
 
-`Intlayer` memikirkan ulang masalah ini dari dasar: tidak ada kamus terpusat, tidak perlu mencocokkan namespace dengan route secara manual. Konten dideklarasikan tepat di sebelah komponen, dan kompiler build-time hanya membundel apa yang benar-benar dibutuhkan oleh setiap halaman.
+`next-intl` adalah pustaka i18n paling populer untuk Next.js. Intlayer adalah alternatif berbasis kompiler dengan cakupan komponen. Keduanya melokalkan aplikasi App Router. Pertanyaannya adalah berapa biaya masing-masing setelah aplikasi dibangun.
 
-Artikel ini membandingkan keduanya berdasarkan data 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.
+Artikel ini bukan tutorial. Ini adalah perbandingan yang didukung oleh angka dari [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom), rangkaian tolok ukur sumber terbuka yang membangun aplikasi yang sama dengan setiap pustaka dan mengukur apa yang sebenarnya diunduh dan dijalankan peramban.
 
 <TOC/>
 
-> **tl;dr**: `next-intl` menambahkan setidaknya **+12.6 KB gzip** di setiap halaman hanya untuk runtime-nya, dan membocorkan **~90% string halaman lain** dalam pengaturan standarnya (`static` dan `dynamic`). Menghilangkan kebocoran tersebut mengharuskan pemisahan katalog ke dalam namespace dan memilihnya secara manual per halaman, sebuah pekerjaan rumit yang dihindari banyak tim. Sebaliknya, kompiler `Intlayer` menjamin kebocoran **0%**, komponen **3x lebih kecil**, dan hanya **+0.3 KB** di atas aplikasi dasar tanpa konfigurasi manual tambahan.
+> **tl;dr**: Pada aplikasi Next.js yang sama, `next-intl` menambahkan **+12.6 KB gzip** JavaScript di setiap halaman, dibandingkan dengan **+0.3 KB** untuk Intlayer. Tanpa upaya tambahan, `next-intl` mengirimkan **~90% string halaman luar** pada setiap halaman. Mencapai 0% kebocoran dengan `next-intl` membutuhkan namespace dan `pick(messages, [...])` per halaman. Intlayer mencapai 0% secara default, karena kompilernya mencakup konten per komponen. Jika Anda menginginkan API `next-intl` dengan output Intlayer, adaptor `@intlayer/next-intl` berukuran **147.5 KB** per halaman dibandingkan **153.6 KB** dengan aslinya.
 
 ## Ringkasan
 
@@ -89,6 +89,10 @@ Untuk setiap build, pengujian mencatat:
 
 ### Hasil pada Next.js (App Router)
 
+Pilih metrik dan pustaka yang penting bagi Anda:
+
+<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 |
@@ -107,8 +111,19 @@ Untuk setiap build, pengujian mencatat:
 - **Kebocoran.** Dalam pengaturan yang paling sering digunakan (`static` dan `dynamic`), `next-intl` mengirimkan **~90% string halaman lain** di setiap halaman, karena seluruh `en.json` masuk ke penyedia klien. Menghilangkannya membutuhkan pekerjaan pemisahan manual yang teliti. Intlayer langsung 0% secara otomatis.
 - **Ukuran komponen.** Komponen yang memanggil `useTranslations()` menghasilkan rata-rata 21.8 KB; komponen yang sama dengan `useIntlayer()` hanya 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 strategi, dalam [laporan benchmark Next.js](https://intlayer.org/id/doc/benchmark/nextjs).
+
 ### Hasil pada TanStack Start (`use-intl`)
 
+`use-intl` adalah inti independen framework dari `next-intl`. API yang sama, format pesan yang sama. Membandingkannya dengan `intlayer` di TanStack Start menghilangkan bagian khusus Next.js dari persamaan.
+
 | Pustaka                       | Strategi       | Ukuran Lib (gz) | Rata-rata JS Halaman (gz) | Bocor Lokal | Bocor Halaman | Rata-rata Komponen (gz) | Reaktivitas E2E |
 | ----------------------------- | -------------- | --------------: | ------------------------: | ----------: | ------------: | ----------------------: | --------------: |
 | **base** (tanpa i18n)         | -              |          0.0 KB |                  111.0 KB |        0.0% |          0.0% |                  0.7 KB |          8.1 ms |
@@ -127,8 +142,19 @@ Untuk setiap build, pengujian mencatat:
 - Perbedaan arsitektur sangat terlihat pada **ukuran komponen**: 76-87 KB pada `use-intl` berbanding 6-8 KB pada Intlayer.
 - **Pergantian lokal** 2x-4x lebih cepat dengan Intlayer (3 ms vs 7-21 ms).
 
+<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 benchmark TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack).
+
 ## Mengapa ada perbedaan? Katalog terpusat vs kamus terkompilasi
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 `next-intl` mengikuti model klasik: satu JSON per lokal, dimuat dalam `getRequestConfig`, diteruskan ke `NextIntlClientProvider`, dan dibaca lewat `t("namespace.key")`.
 
 ```bash
@@ -150,6 +176,10 @@ Untuk setiap build, pengujian mencatat:
 
 Runtime tidak dapat memprediksi kunci apa yang akan digunakan halaman, sehingga mengirimkan seluruh katalog adalah langkah paling aman.
 
+Biaya kegagalan mencapainya tumbuh pada dua sumbu sekaligus, halaman dan lokalitas:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
+
 Intlayer membalikkan model tersebut. Konten dideklarasikan langsung di sebelah komponen:
 
 ```bash
@@ -177,7 +207,8 @@ Saat build, kompiler melihat komponen mana yang mengimpor kamus mana, dan hanya
 
 ### Komponen klien
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```json fileName="messages/en.json"
 {
@@ -188,7 +219,7 @@ Saat build, kompiler melihat komponen mana yang mengimpor kamus mana, dan hanya
 }
 ```
 
-```tsx fileName="src/components/Counter.tsx"
+```tsx fileName="src/components/ClientCounter.tsx"
 "use client";
 
 import { useState } from "react";
@@ -210,7 +241,10 @@ export const Counter = () => {
 };
 ```
 
-**Intlayer**
+> Ingatlah untuk menyertakan namespace `counter` dalam pesan yang diteruskan ke `NextIntlClientProvider` di setiap halaman yang merender komponen ini.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="src/components/Counter/index.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -249,11 +283,16 @@ export const Counter = () => {
 };
 ```
 
+Tidak ada yang perlu didaftarkan di halaman: komponen membawa kontennya sendiri.
+
+</Tab>
+</Tabs>
 ### Komponen server sinkron
 
 Elemen UI bersama (navbar, footer, kartu) sering kali merupakan komponen server yang dirender sebagai anak dari komponen klien, sehingga tidak boleh bersifat `async`.
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 type ServerCounterProps = {
@@ -269,7 +308,10 @@ export const ServerCounter = ({ t, formattedCount }: ServerCounterProps) => (
 );
 ```
 
-**Intlayer**
+Halaman harus memanggil `await getTranslations("counter")` dan `await getFormatter()`, lalu meneruskan hasilnya ke bawah sebagai props. Komponen tidak lagi mandiri.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/components/ServerCounter.tsx"
 import { useIntlayer } from "next-intlayer/server";
@@ -288,9 +330,12 @@ export const ServerCounter = ({ count }: { count: number }) => {
 };
 ```
 
+</Tab>
+</Tabs>
 ### Metadata
 
-**next-intl**
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="next-intl" value="next-intl">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import type { Metadata } from "next";
@@ -323,7 +368,8 @@ export const generateMetadata = async ({
 };
 ```
 
-**Intlayer**
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```tsx fileName="src/app/[locale]/about/page.tsx"
 import { getIntlayer, getMultilingualUrls } from "intlayer";
@@ -347,6 +393,9 @@ export const generateMetadata = async ({
 };
 ```
 
+</Tab>
+</Tabs>
+
 ## Pertahankan API next-intl, dapatkan hasil Intlayer
 
 Anda tidak perlu menulis ulang komponen untuk mendapatkan angka performa di atas. Paket `@intlayer/next-intl` adalah adaptor siap pakai: ia mempertahankan `useTranslations`, `getTranslations`, `useFormatter`, `t.rich()`, dan bentuk jamak ICU, sambil menyajikannya dari kamus Intlayer yang dikompilasi oleh kompiler Intlayer.
@@ -368,17 +417,84 @@ Lihat [panduan migrasi next-intl](https://intlayer.org/id/doc/migration/next-int
 
 ## Kapan harus memilih yang mana?
 
-- **Pilih next-intl** jika Anda menginginkan standar komunitas Next.js yang luas, sangat bergantung pada ICU MessageFormat, aplikasi Anda berskala kecil hingga menengah, atau Anda terintegrasi dengan platform penerjemahan eksternal (Crowdin, Phrase, Lokalise...).
-- **Pilih Intlayer** jika Anda menginginkan **konten dengan cakupan komponen**, **TypeScript yang ketat**, **deteksi error kunci yang hilang saat build**, **tree-shaking dan lazy loading tanpa konfigurasi**, komponen server sinkron, dan alat redaksi bawaan (Visual Editor, CMS, terjemahan AI, server MCP).
-- **Pilih `@intlayer/next-intl`** jika Anda sudah menggunakan `next-intl` dan ingin peningkatan ukuran bundle tanpa menulis ulang aplikasi.
+<AccordionGroup>
+<Accordion header="Pilih next-intl">
+
+Anda menginginkan standar ekosistem untuk Next.js, mengandalkan ICU MessageFormat, aplikasi Anda berskala kecil hingga menengah, atau Anda berintegrasi dengan platform penerjemahan (Crowdin, Phrase, Lokalise...) yang mengharapkan JSON terpusat. Alokasikan waktu untuk membagi katalog ke dalam namespace dan memilih pesan dengan `pick()` per halaman jika performa menjadi prioritas.
+
+</Accordion>
+<Accordion header="Pilih Intlayer">
+
+Anda menginginkan **konten dengan cakupan komponen**, **TypeScript yang ketat**, **kesalahan kunci hilang pada waktu build**, **tree-shaking dan pemuatan lambat (lazy loading) tanpa usaha**, komponen server sinkron, 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/next-intl">
+
+Anda sudah menggunakan `next-intl` dan ingin penghematan ukuran bundel tanpa perlu menulis ulang kode. [Adaptor kompatibilitas](https://intlayer.org/id/doc/compatibility/next-intl) menjaga impor dan file `messages/{locale}.json` Anda sebagai sumber kebenaran tunggal. Diukur berdampingan dalam [next-intl vs @intlayer/next-intl](https://intlayer.org/id/blog/next-intl-vs-intlayer-next-intl).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Apakah next-intl lebih lambat dari Intlayer?">
+
+Tidak pada waktu render. Perbedaannya terletak pada apa yang dikirim ke browser: `next-intl` berbiaya **+12.6 KB gzip** runtime pada setiap halaman dan pada konfigurasi umum mengirimkan ~90% string halaman lain bersama setiap halaman. Peralihan bahasa dan hidrasi sebanding di Next.js (15-18 ms); di TanStack Start `use-intl` membutuhkan 7-21 ms dibandingkan 3-4 ms untuk Intlayer.
+
+</Question>
+
+<Question title="Bisakah saya mencapai 0% kebocoran dengan next-intl?">
+
+Bisa, dengan konfigurasi `scoped-dynamic`: bagi `messages/{locale}.json` menjadi satu namespace per rute, lalu gunakan `pick(messages, [...])` di setiap halaman dan jaga pemetaan tersebut tetap sinkron saat komponen berpindah. Baris `scoped-*` dalam tolok ukur mencerminkan pekerjaan tersebut. Intlayer mencapai 0% secara bawaan karena kompilator membatasi konten per komponen. Lihat [pengoptimalan bundel](https://intlayer.org/id/doc/concept/bundle-optimization).
+
+</Question>
+
+<Question title="Apakah saya harus menulis ulang komponen untuk bermigrasi?">
+
+Tidak. `@intlayer/next-intl` mempertahankan `useTranslations`, `getTranslations`, `useFormatter`, `t.rich()`, bentuk jamak ICU, dan helper navigasi, lalu menyediakannya dari kamus yang dikompilasi. Cukup satu baris plugin di `next.config.ts`. Panduan langkah demi langkah di [panduan migrasi next-intl](https://intlayer.org/id/doc/migration/next-intl).
+
+</Question>
+
+<Question title="Apakah Intlayer mendukung ICU MessageFormat?">
+
+Dukungan ICU sedang dikembangkan pada API asli. Adaptor kompatibilitas (`@intlayer/next-intl`, `@intlayer/use-intl`) sudah menjalankan ICU: bentuk jamak, `select`, `selectordinal`, `#`, dan `{ts, date, long}` diproses melalui penyelesai ICU Intlayer. Baca [format pesan ICU](https://intlayer.org/id/blog/icu-message-format) untuk detailnya.
+
+</Question>
+
+<Question title="Bisakah saya mempertahankan file messages/{locale}.json?">
+
+Bisa. [Plugin sinkronisasi JSON](https://intlayer.org/id/doc/compatibility/next-intl) membacanya, membagi kunci tingkat atas menjadi kamus, dan menulis kembali terjemahan ke file yang sama ketika CLI atau CMS memperbaruinya. Alur kerja penerjemah Anda tidak berubah.
+
+</Question>
+
+</FAQ>
 
 ## Perbandingan terkait
 
-- [i18next vs Intlayer](https://intlayer.org/id/blog/i18next-vs-intlayer) (tolok ukur yang sama)
-- [Lingui vs Intlayer](https://intlayer.org/id/blog/lingui-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)
+Tolok ukur yang sama, pustaka lain:
+
+- [i18next vs Intlayer](https://intlayer.org/id/blog/i18next-vs-intlayer)
+- [Lingui vs Intlayer](https://intlayer.org/id/blog/lingui-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)
-- [Apakah next-intl sudah ketinggalan zaman?](https://intlayer.org/id/blog/is-next-intl-outdated)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/id/blog/react-i18next-vs-react-intl-vs-intlayer)
+
+Mendalami next-intl:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/id/blog/next-intl-vs-intlayer-next-intl), adaptor diukur pada aplikasi yang sama
+- [Is next-intl outdated?](https://intlayer.org/id/blog/is-next-intl-outdated)
+- [Using Intlayer with next-intl](https://intlayer.org/id/blog/intlayer-with-next-intl)
+- [How to internationalize a Next.js app with next-intl](https://intlayer.org/id/blog/nextjs-internationalization-using-next-intl)
+
+Dokumentasi referensi:
+
+- [Laporan benchmark Next.js](https://intlayer.org/id/doc/benchmark/nextjs) dan [laporan benchmark TanStack Start](https://intlayer.org/id/doc/benchmark/tanstack)
+- [Adaptor kompatibilitas: next-intl](https://intlayer.org/id/doc/compatibility/next-intl) dan [panduan migrasi](https://intlayer.org/id/doc/migration/next-intl)
+- [Pengoptimalan bundel](https://intlayer.org/id/doc/concept/bundle-optimization) dan [kompilator Intlayer](https://intlayer.org/id/doc/compiler)
+- [i18n per komponen vs terpusat](https://intlayer.org/id/blog/per-component-vs-centralized-i18n)
+- [i18n berbasis kompilator vs deklaratif](https://intlayer.org/id/blog/compiler-vs-declarative-i18n)
 
 ## Bintang GitHub
 

package/blog/id/transform_existing_vite_react_app_using_compiler.md

@@ -289,7 +289,9 @@ const pathList = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+const sitemapXml = generateSitemap(pathList, {
+  siteUrl: "https://example.com",
+});
 fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
 
 const getAllMultilingualUrls = (urls) =>
@@ -302,7 +304,7 @@ const robotsTxt = [
   "Allow: /",
   ...disallowedPaths.map((path) => `Disallow: ${path}`),
   "",
-  `Sitemap: ${SITE_URL}/sitemap.xml`,
+  `Sitemap: https://example.com/sitemap.xml`,
 ].join("\n");
 
 fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);