@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

package/docs/id/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Next.js 16 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -808,7 +808,131 @@ return (
 
 </Step>
 
-<Step number={1} title="Ekstrak konten komponen Anda" isOptional={true}>
+<Step number={11} title="Membuat Komponen Link yang Dilokalkan" isOptional={true}>
+
+Untuk memastikan navigasi aplikasi Anda menghormati lokal saat ini, Anda dapat membuat komponen `Link` kustom. Komponen ini secara otomatis menambahkan awalan bahasa saat ini pada URL internal, sehingga. Misalnya, ketika pengguna berbahasa Prancis mengklik tautan ke halaman "Tentang", mereka akan diarahkan ke `/fr/about` alih-alih `/about`.
+
+Perilaku ini berguna untuk beberapa alasan:
+
+- **SEO dan Pengalaman Pengguna**: URL yang dilokalkan membantu mesin pencari mengindeks halaman spesifik bahasa dengan benar dan menyediakan konten kepada pengguna dalam bahasa pilihan mereka.
+- **Konsistensi**: Dengan menggunakan tautan yang dilokalkan di seluruh aplikasi Anda, Anda menjamin navigasi tetap dalam lokal saat ini, mencegah perubahan bahasa yang tidak diinginkan.
+- **Pemeliharaan**: Memusatkan logika lokalisasi dalam satu komponen menyederhanakan pengelolaan URL, sehingga basis kode Anda lebih mudah dipelihara dan diperluas seiring pertumbuhan aplikasi Anda.
+
+Berikut adalah implementasi komponen `Link` yang dilokalisasi dalam TypeScript:
+
+```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import { getLocalizedUrl } from "intlayer";
+import NextLink, { type LinkProps as NextLinkProps } from "next/link";
+import { useLocale } from "next-intlayer";
+import type { PropsWithChildren, FC } from "react";
+
+/**
+ * Fungsi utilitas untuk memeriksa apakah URL yang diberikan bersifat eksternal.
+ * Jika URL dimulai dengan http:// atau https://, maka dianggap eksternal.
+ */
+export const checkIsExternalLink = (href?: string): boolean =>
+  /^https?:\/\//.test(href ?? "");
+
+/**
+ * Komponen Link kustom yang menyesuaikan atribut href berdasarkan locale saat ini.
+ * Untuk tautan internal, menggunakan `getLocalizedUrl` untuk menambahkan prefix locale pada URL (misalnya, /fr/about).
+ * Ini memastikan navigasi tetap dalam konteks locale yang sama.
+ */
+export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
+  href,
+  children,
+  ...props
+}) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href.toString());
+
+  // Jika tautan bersifat internal dan href valid diberikan, dapatkan URL yang sudah dilokalisasi.
+  const hrefI18n: NextLinkProps["href"] =
+    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+
+  return (
+    <NextLink href={hrefI18n} {...props}>
+      {children}
+    </NextLink>
+  );
+};
+```
+
+#### Cara Kerjanya
+
+- **Mendeteksi Tautan Eksternal**:  
+  Fungsi pembantu `checkIsExternalLink` menentukan apakah sebuah URL bersifat eksternal. Tautan eksternal dibiarkan tidak berubah karena tidak memerlukan lokalisasi.
+
+- **Mengambil Locale Saat Ini**:  
+  Hook `useLocale` menyediakan locale saat ini (misalnya, `fr` untuk bahasa Prancis).
+
+- **Melokalisasi URL**:  
+  Untuk tautan internal (yaitu, non-eksternal), `getLocalizedUrl` digunakan untuk secara otomatis menambahkan awalan URL dengan locale saat ini. Ini berarti jika pengguna Anda menggunakan bahasa Prancis, meneruskan `/about` sebagai `href` akan mengubahnya menjadi `/fr/about`.
+
+- **Mengembalikan Tautan**:  
+  Komponen mengembalikan elemen `<a>` dengan URL yang dilokalkan, memastikan bahwa navigasi konsisten dengan locale tersebut.
+
+Dengan mengintegrasikan komponen `Link` ini di seluruh aplikasi, Anda mempertahankan pengalaman pengguna yang koheren dan sadar bahasa sambil juga mendapatkan manfaat dari peningkatan SEO dan kegunaan.
+
+</Step>
+
+<Step number={12} title="Mendapatkan locale saat ini di Server Actions" isOptional={true}>
+
+Jika Anda memerlukan locale yang aktif di dalam Server Action (misalnya, untuk melokalkan email atau menjalankan logika yang sensitif terhadap locale), panggil `getLocale` dari `next-intlayer/server`:
+
+```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
+"use server";
+
+import { getLocale } from "next-intlayer/server";
+
+export const myServerAction = async () => {
+  const locale = await getLocale();
+
+  // Lakukan sesuatu dengan locale
+};
+```
+
+> Fungsi `getLocale` mengikuti strategi bertingkat untuk menentukan locale pengguna:
+>
+> 1. Pertama, ia memeriksa header permintaan untuk nilai locale yang mungkin telah diatur oleh proxy
+> 2. Jika tidak ada locale yang ditemukan di header, ia mencari locale yang disimpan di cookie
+> 3. Jika tidak ada cookie yang ditemukan, ia mencoba mendeteksi bahasa pilihan pengguna dari pengaturan browser mereka
+> 4. Sebagai upaya terakhir, ia kembali ke default locale yang dikonfigurasi aplikasi
+>
+> Ini memastikan locale yang paling tepat dipilih berdasarkan konteks yang tersedia.
+
+</Step>
+
+<Step number={13} title="Mendapatkan locale saat ini di Server Actions" isOptional={true}>
+
+Jika Anda memerlukan locale aktif di dalam Server Action (misalnya, untuk melokalkan email atau menjalankan logika yang sadar locale), panggil `getLocale` dari `next-intlayer/server`:
+
+```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
+"use server";
+
+import { getLocale } from "next-intlayer/server";
+
+export const myServerAction = async () => {
+  const locale = await getLocale();
+
+  // Lakukan sesuatu dengan locale
+};
+```
+
+> Fungsi `getLocale` mengikuti strategi cascading untuk menentukan locale pengguna:
+>
+> 1. Pertama, memeriksa header permintaan untuk nilai locale yang mungkin telah diatur oleh middleware
+> 2. Jika tidak ditemukan locale di header, mencari locale yang disimpan di cookie
+> 3. Jika tidak ditemukan cookie, mencoba mendeteksi bahasa yang dipilih pengguna dari pengaturan browser mereka
+> 4. Sebagai upaya terakhir, menggunakan locale default yang dikonfigurasi dalam aplikasi
+>
+> Ini memastikan locale yang paling sesuai dipilih berdasarkan konteks yang tersedia.
+
+</Step>
+
+<Step number={14} title="Ekstrak konten komponen Anda" isOptional={true}>
 
 Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
 
@@ -923,74 +1047,72 @@ bun run build # Or bun run dev
 
 </Step>
 
-<Step number={11} title="Membuat Komponen Link yang Dilokalkan" isOptional={true}>
+</Steps>
 
-Untuk memastikan navigasi aplikasi Anda menghormati lokal saat ini, Anda dapat membuat komponen `Link` kustom. Komponen ini secara otomatis menambahkan awalan bahasa saat ini pada URL internal, sehingga. Misalnya, ketika pengguna berbahasa Prancis mengklik tautan ke halaman "Tentang", mereka akan diarahkan ke `/fr/about` alih-alih `/about`.
+### Memantau perubahan kamus pada Turbopack
 
-Perilaku ini berguna untuk beberapa alasan:
+Saat menggunakan Turbopack sebagai server pengembangan Anda dengan perintah `next dev --turbopack`, perubahan kamus tidak akan terdeteksi secara otomatis secara default.
 
-- **SEO dan Pengalaman Pengguna**: URL yang dilokalkan membantu mesin pencari mengindeks halaman spesifik bahasa dengan benar dan menyediakan konten kepada pengguna dalam bahasa pilihan mereka.
-- **Konsistensi**: Dengan menggunakan tautan yang dilokalkan di seluruh aplikasi Anda, Anda menjamin navigasi tetap dalam lokal saat ini, mencegah perubahan bahasa yang tidak diinginkan.
-- **Pemeliharaan**: Memusatkan logika lokalisasi dalam satu komponen menyederhanakan pengelolaan URL, sehingga basis kode Anda lebih mudah dipelihara dan diperluas seiring pertumbuhan aplikasi Anda.
+Batasan ini terjadi karena Turbopack tidak dapat menjalankan plugin webpack secara paralel untuk memantau perubahan pada file konten Anda. Untuk mengatasinya, Anda perlu menggunakan perintah `intlayer watch` untuk menjalankan server pengembangan dan pengawas build Intlayer secara bersamaan.
 
-Berikut adalah implementasi komponen `Link` yang dilokalisasi dalam TypeScript:
+```json5 fileName="package.json"
+{
+  // ... Konfigurasi package.json Anda yang sudah ada
+  "scripts": {
+    // ... Konfigurasi skrip Anda yang sudah ada
+    "dev": "intlayer watch --with 'next dev'",
+  },
+}
+```
 
-```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
-"use client";
+> Jika Anda menggunakan next-intlayer@<=6.x.x, Anda harus mempertahankan bendera `--turbopack` agar aplikasi Next.js 16 berfungsi dengan benar dengan Turbopack. Kami merekomendasikan penggunaan next-intlayer@>=7.x.x untuk menghindari batasan ini.
 
-import { getLocalizedUrl } from "intlayer";
-import NextLink, { type LinkProps as NextLinkProps } from "next/link";
-import { useLocale } from "next-intlayer";
-import type { PropsWithChildren, FC } from "react";
+### Konfigurasi TypeScript
 
-/**
- * Fungsi utilitas untuk memeriksa apakah URL yang diberikan bersifat eksternal.
- * Jika URL dimulai dengan http:// atau https://, maka dianggap eksternal.
- */
-export const checkIsExternalLink = (href?: string): boolean =>
-  /^https?:\/\//.test(href ?? "");
+Intlayer menggunakan module augmentation untuk mendapatkan manfaat dari TypeScript dan membuat codebase Anda lebih kuat.
 
-/**
- * Komponen Link kustom yang menyesuaikan atribut href berdasarkan locale saat ini.
- * Untuk tautan internal, menggunakan `getLocalizedUrl` untuk menambahkan prefix locale pada URL (misalnya, /fr/about).
- * Ini memastikan navigasi tetap dalam konteks locale yang sama.
- */
-export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
-  href,
-  children,
-  ...props
-}) => {
-  const { locale } = useLocale();
-  const isExternalLink = checkIsExternalLink(href.toString());
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-  // Jika tautan bersifat internal dan href valid diberikan, dapatkan URL yang sudah dilokalisasi.
-  const hrefI18n: NextLinkProps["href"] =
-    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
+![Kesalahan terjemahan](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-  return (
-    <NextLink href={hrefI18n} {...props}>
-      {children}
-    </NextLink>
-  );
-};
+Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara otomatis.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Konfigurasi TypeScript Anda yang sudah ada
+  "include": [
+    // ... Konfigurasi TypeScript Anda yang sudah ada
+    ".intlayer/**/*.ts", // Sertakan tipe yang dihasilkan secara otomatis
+  ],
+}
 ```
 
-#### Cara Kerjanya
+### Konfigurasi Git
 
-- **Mendeteksi Tautan Eksternal**:  
-  Fungsi pembantu `checkIsExternalLink` menentukan apakah sebuah URL bersifat eksternal. Tautan eksternal dibiarkan tidak berubah karena tidak memerlukan lokalisasi.
+Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari meng-commit file tersebut ke repositori Git Anda.
 
-- **Mengambil Locale Saat Ini**:  
-  Hook `useLocale` menyediakan locale saat ini (misalnya, `fr` untuk bahasa Prancis).
+Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke file `.gitignore` Anda:
 
-- **Melokalisasi URL**:  
-  Untuk tautan internal (yaitu, non-eksternal), `getLocalizedUrl` digunakan untuk secara otomatis menambahkan awalan URL dengan locale saat ini. Ini berarti jika pengguna Anda menggunakan bahasa Prancis, meneruskan `/about` sebagai `href` akan mengubahnya menjadi `/fr/about`.
+```plaintext fileName=".gitignore"
+# Abaikan file yang dihasilkan oleh Intlayer
+.intlayer
+```
 
-- **Mengembalikan Tautan**:  
-  Komponen mengembalikan elemen `<a>` dengan URL yang dilokalkan, memastikan bahwa navigasi konsisten dengan locale tersebut.
+### Ekstensi VS Code
 
-Dengan mengintegrasikan komponen `Link` ini di seluruh aplikasi, Anda mempertahankan pengalaman pengguna yang koheren dan sadar bahasa sambil juga mendapatkan manfaat dari peningkatan SEO dan kegunaan.
+Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **Ekstensi VS Code Intlayer** resmi.
 
-</Step>
+[Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-</Steps>
+Ekstensi ini menyediakan:
+
+- **Autocompletion** untuk kunci terjemahan.
+- **Deteksi kesalahan waktu nyata** untuk terjemahan yang hilang.
+- **Pratinjau inline** dari konten yang diterjemahkan.
+- **Tindakan cepat** untuk dengan mudah membuat dan memperbarui terjemahan.
+
+Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, lihat [dokumentasi Ekstensi VS Code Intlayer](https://intlayer.org/doc/vs-code-extension).
+
+### Melangkah Lebih Jauh
+
+Untuk melangkah lebih jauh, Anda dapat mengimplementasikan [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) atau mengeksternalisasi konten Anda menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).

package/docs/id/intlayer_with_nextjs_compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Next.js multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -612,27 +612,6 @@ bun run build # Or bun run dev
 
 </Steps>
 
-### Konfigurasi Babel
-
-Kompilator Intlayer memerlukan Babel untuk mengekstrak dan mengoptimalkan konten Anda. Perbarui `babel.config.js` (atau `babel.config.json`) Anda untuk menyertakan plugin Intlayer:
-
-```typescript fileName="babel.config.js"
-const {
-  intlayerExtractBabelPlugin,
-  intlayerOptimizeBabelPlugin,
-  getExtractPluginOptions,
-  getOptimizePluginOptions,
-} = require("@intlayer/babel");
-
-module.exports = {
-  presets: ["next/babel"],
-  plugins: [
-    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
-    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
-  ],
-};
-```
-
 ### Konfigurasi TypeScript
 
 Intlayer menggunakan augmentasi modul untuk memanfaatkan keunggulan TypeScript dan membuat basis kode Anda lebih kuat.

package/docs/id/intlayer_with_nextjs_no_locale_path.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Next.js 16 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_nextjs_page_router.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js Page Router i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Next.js Page Router multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_react_native+expo.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-25
 title: "Expo + React Native i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Expo + React Native multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -17,6 +17,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
 applicationShowcase: https://intlayer-react-native.vercel.app
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Impor provider dan hook langsung dari react-native-intlayer; react-intlayer tidak lagi diperlukan sebagai dependensi langsung"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
@@ -120,51 +123,6 @@ Lihat [Template Aplikasi](https://github.com/aymericzip/intlayer-react-native-te
 
 Dari proyek React Native Anda, instal paket berikut:
 
-```bash packageManager = "npm"
-npm instal intlayer reaksi-intlayer
-npm install --save-dev reaksi-asli-intlayer
-npx lapisan dalam init
-```
-
-```bash packageManager = "pnpm"
-pnpm menambahkan lapisan dalam reaksi-lapisan
-pnpm tambahkan --save-dev react-native-intlayer
-pnpm dalam lapisan init
-```
-
-```bash packageManager = "benang"
-benang tambahkan lapisan dalam reaksi-lapisan
-benang tambahkan --save-dev react-native-intlayer
-benang dalam lapisan init
-```
-
-```bash packageManager = "bun"
-bun tambahkan intlayer react-intlayer
-sanggul tambahkan --dev react-native-intlayer
-bun x lapisan init
-```
-
-### Paket
-
-- **pemain**  
-  Toolkit inti i18n untuk konfigurasi, konten kamus, pembuatan tipe, dan perintah CLI.
-
-- **pemain reaksi**  
-  Integrasi React yang menyediakan penyedia konteks dan React hooks yang akan Anda gunakan di React Native untuk memperoleh dan berpindah lokal.
-
-- **reaksi-asli-intlayer**  
-  Integrasi React Native yang menyediakan plugin Metro untuk mengintegrasikan Intlayer dengan bundler React Native.
-
----
-
-</Step>
-
-<Step number={2} title="Instalasi Dependensi">
-
-Lihat [Template Aplikasi](https://github.com/aymericzip/intlayer-react-native-template) di GitHub.
-
-Dari proyek React Native Anda, instal paket-paket berikut:
-
 ```bash packageManager="npm"
 npx intlayer-cli init --interactive
 ```
@@ -181,28 +139,24 @@ yarn dlx intlayer-cli init --interactive
 bunx intlayer-cli init --interactive
 ```
 
-> flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
+> Flag `--interactive` bersifat opsional. Gunakan `intlayer-cli init` jika Anda adalah agen AI.
 
-> Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Misalnya:
+> Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Contohnya:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
+yarn add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add --dev react-native-intlayer
+bun add intlayer react-native-intlayer
 ```
 
 ### Paket
@@ -210,17 +164,14 @@ bun add --dev react-native-intlayer
 - **intlayer**  
   Toolkit inti i18n untuk konfigurasi, konten kamus, generasi tipe, dan perintah CLI.
 
-- **react-intlayer**  
-  Integrasi React yang menyediakan context providers dan React hooks yang akan Anda gunakan di React Native untuk mendapatkan dan mengganti locale.
-
 - **react-native-intlayer**  
-  Integrasi React Native yang menyediakan plugin Metro untuk mengintegrasikan Intlayer dengan bundler React Native.
+  Integrasi React Native yang menyediakan context providers dan React hooks yang akan Anda gunakan untuk mendapatkan dan mengganti locale, polyfill React Native, serta plugin Metro untuk mengintegrasikan Intlayer dengan bundler React Native. Paket ini mengekspor ulang semua hal dari `react-intlayer`, sehingga Anda hanya memerlukan satu paket ini dalam aplikasi React Native.
 
 ---
 
 </Step>
 
-<Step number={3} title="Buat Konfigurasi Intlayer">
+<Step number={2} title="Buat Konfigurasi Intlayer">
 
 Di root proyek Anda (atau di mana saja yang nyaman), buat file **konfigurasi Intlayer**. File tersebut mungkin terlihat seperti ini:
 
@@ -250,11 +201,11 @@ Dalam konfigurasi ini, Anda dapat:
 - Mengonfigurasi **daftar locale yang didukung**.
 - Menetapkan locale **default**.
 - Nanti, Anda dapat menambahkan opsi yang lebih canggih (misalnya, log, direktori konten khusus, dll.).
-- Lihat [dokumentasi konfigurasi Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md) untuk informasi lebih lanjut.
+- Lihat [dokumentasi konfigurasi Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) untuk informasi lebih lanjut.
 
 </Step>
 
-<Step number={4} title="Tambahkan plugin Metro">
+<Step number={3} title="Tambahkan plugin Metro">
 
 Metro adalah bundler untuk React Native. Ini adalah bundler default untuk proyek React Native yang dibuat dengan perintah `react-native init`. Untuk menggunakan Intlayer dengan Metro, Anda perlu menambahkan plugin ke file `metro.config.js` Anda:
 
@@ -274,11 +225,11 @@ module.exports = (async () => {
 
 </Step>
 
-<Step number={5} title="Tambahkan provider Intlayer">
+<Step number={4} title="Tambahkan provider Intlayer">
 
 Untuk menjaga sinkronisasi bahasa pengguna di seluruh aplikasi Anda, Anda perlu membungkus komponen root Anda dengan komponen `IntlayerProvider` dari `react-native-intlayer`.
 
-> Pastikan untuk menggunakan provider dari `react-native-intlayer` bukan dari `react-intlayer`. Ekspor dari `react-native-intlayer` mencakup polyfill untuk API web.
+> Selalu impor dari `react-native-intlayer`. `IntlayerProvider`-nya mencakup polyfill untuk API web yang digunakan oleh Intlayer, dan paket ini mengekspor ulang semua hook serta utilitas dari `react-intlayer`.
 
 Selain itu, Anda perlu menambahkan fungsi `intlayerPolyfill` ke file `index.js` Anda untuk memastikan Intlayer dapat bekerja dengan baik.
 
@@ -305,7 +256,7 @@ export default RootLayout;
 
 </Step>
 
-<Step number={6} title="Deklarasikan Konten Anda">
+<Step number={5} title="Deklarasikan Konten Anda">
 
 Buat file **deklarasi konten** di mana saja dalam proyek Anda (biasanya di dalam `src/`), menggunakan salah satu format ekstensi yang didukung Intlayer:
 
@@ -320,6 +271,14 @@ Buat file **deklarasi konten** di mana saja dalam proyek Anda (biasanya di dalam
 - `.content.cjx`
 - dll.
 
+> **Expo Router (web): jauhkan file `.content.*` dari direktori `app/`.** Expo Router memperlakukan setiap file JavaScript/TypeScript di dalam `app/` sebagai rute. Di web, penemuan rutenya memindai sistem file secara langsung dan **tidak** menghormati `resolver.blockList` Metro, sehingga `*.content.ts` yang ditempatkan bersama terdaftar sebagai rute. File seperti `app/(tabs)/_layout.content.ts` bahkan diuraikan sebagai tata letak (bagian `.content` dibaca sebagai sufiks platform), yang bertabrakan dengan `_layout.tsx` asli dan menampilkan:
+>
+> ```
+> The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.
+> ```
+>
+> Tempatkan deklarasi Anda di direktori di luar `app/` (misalnya `content/` atau `src/content/`). Intlayer menemukan file `.content.*` di mana saja dalam proyek dan kamus direferensikan oleh `key` mereka, jadi tidak diperlukan perubahan impor. Pada aplikasi native ini tidak diperlukan (`blockList` Metro sudah menyembunyikannya), tetapi menggunakan direktori selain `app/` membuat kedua platform tetap berfungsi.
+
 Contoh (TypeScript dengan node TSX untuk React Native):
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
@@ -368,7 +327,7 @@ export default homeScreenContent;
 
 </Step>
 
-<Step number={7} title="Gunakan Intlayer di Komponen Anda">
+<Step number={6} title="Gunakan Intlayer di Komponen Anda">
 
 Gunakan hook `useIntlayer` di komponen anak untuk mendapatkan konten yang sudah dilokalisasi.
 
@@ -376,7 +335,7 @@ Gunakan hook `useIntlayer` di komponen anak untuk mendapatkan konten yang sudah
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "react-intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -423,7 +382,7 @@ export default HomeScreen;
 
 </Step>
 
-<Step number={8} title="Ubah Locale Aplikasi">
+<Step number={7} title="Ubah Locale Aplikasi" isOptional={true}>
 
 Untuk mengganti locale dari dalam komponen Anda, Anda dapat menggunakan metode `setLocale` dari hook `useLocale`:
 
@@ -431,7 +390,7 @@ Untuk mengganti locale dari dalam komponen Anda, Anda dapat menggunakan metode `
 import { type FC } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
+import { useLocale } from "react-native-intlayer";
 
 export const LocaleSwitcher: FC = () => {
   const { setLocale, availableLocales } = useLocale();
@@ -508,7 +467,7 @@ Ini yang mengaktifkan fitur seperti:
 Untuk menghindari commit file yang dihasilkan otomatis oleh Intlayer, tambahkan berikut ini ke `.gitignore` Anda:
 
 ```bash
-#  Abaikan file yang dihasilkan oleh Intlayer
+# Abaikan file yang dihasilkan oleh Intlayer
 .intlayer
 ```
 
@@ -549,7 +508,7 @@ Intlayer terutama menargetkan Web Intl API; pada React Native Anda harus menyert
 
 Daftar periksa:
 
-- Gunakan versi terbaru dari `intlayer`, `react-intlayer`, dan `react-native-intlayer`.
+- Gunakan versi terbaru dari `intlayer` dan `react-native-intlayer`.
 - Aktifkan polyfill Intlayer.
 - Jika Anda menggunakan `getLocaleName` atau utilitas lain berbasis Intl-API, impor polyfill ini lebih awal (misalnya di `index.js` atau `App.tsx`):
 

package/docs/id/intlayer_with_react_router_v7.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi React Router v7 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -720,100 +720,6 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 
 ---
 
-## Go Further
-
-To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) or externalize your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
-
----
-
-## Documentation References
-
-- [Intlayer Documentation](https://intlayer.org)
-- [React Router v7 Documentation](https://reactrouter.com/)
-- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
-- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
-- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
-- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
-
-This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
-
-<Steps>
-
-<Step number={11} title="Tambahkan middleware">
-
-Anda juga dapat menggunakan `intlayerProxy` untuk menambahkan routing sisi server ke aplikasi Anda. Plugin ini akan secara otomatis mendeteksi locale saat ini berdasarkan URL dan mengatur cookie locale yang sesuai. Jika tidak ada locale yang ditentukan, plugin akan menentukan locale yang paling sesuai berdasarkan preferensi bahasa browser pengguna. Jika tidak ada locale yang terdeteksi, maka akan mengarahkan ulang ke locale default.
-
-> Perlu dicatat bahwa untuk menggunakan `intlayerProxy` di produksi, Anda perlu memindahkan paket `vite-intlayer` dari `devDependencies` ke `dependencies`.
-
-```typescript {3,7} fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayerProxy(), // should be placed first
-    reactRouter(),
-
-    intlayer(),
-  ],
-});
-```
-
----
-
-</Step>
-
-</Steps>
-
-## Konfigurasi TypeScript
-
-Intlayer menggunakan module augmentation untuk mendapatkan manfaat dari TypeScript dan membuat codebase Anda lebih kuat.
-
-Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara otomatis:
-
-```json5 fileName="tsconfig.json"
-{
-  // ... konfigurasi Anda yang sudah ada
-  include: [
-    // ... include Anda yang sudah ada
-    ".intlayer/**/*.ts", // Sertakan tipe yang dihasilkan secara otomatis
-  ],
-}
-```
-
----
-
-## Konfigurasi Git
-
-Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari meng-commit file tersebut ke repositori Git Anda.
-
-Untuk melakukannya, Anda dapat menambahkan instruksi berikut ke file `.gitignore` Anda:
-
-```plaintext fileName=".gitignore"
-# Abaikan file yang dihasilkan oleh Intlayer
-.intlayer
-```
-
----
-
-## Ekstensi VS Code
-
-Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **Ekstensi Intlayer VS Code** resmi.
-
-[Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Ekstensi ini menyediakan:
-
-- **Autocompletion** untuk kunci terjemahan.
-- **Deteksi kesalahan secara real-time** untuk terjemahan yang hilang.
-- **Pratinjau inline** dari konten yang diterjemahkan.
-- **Tindakan cepat** untuk dengan mudah membuat dan memperbarui terjemahan.
-
-Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, lihat [dokumentasi Ekstensi VS Code Intlayer](https://intlayer.org/doc/vs-code-extension).
-
----
-
 ## Melangkah Lebih Jauh
 
 Untuk melangkah lebih jauh, Anda dapat mengimplementasikan [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) atau mengeksternalisasi konten Anda menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).