@intlayer/docs 9.5.5 → 9.5.7

package/docs/id/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-19
+updatedAt: 2026-09-21
 title: "Astro i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="Konfigurasikan Proyek Anda">
 
+### Arsitektur
+
+Dalam arsitektur ini, integrasi `intlayer()` yang didaftarkan di `astro.config.ts` membangun kamus Anda dan menambahkan middleware yang menyelesaikan locale setiap permintaan serta mengeksposnya di `Astro.locals.intlayer`. Halaman berada di bawah segmen rest `src/pages/[...locale]/`, sehingga locale default disajikan tanpa awalan dan setiap locale lainnya mendapatkan URL khusus sendiri. File `.astro` membaca konten dengan hook `useIntlayer` / `useLocale` dari `astro-intlayer`, dan deklarasi konten ditempatkan bersama komponen Anda di `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfigurasi
+
 Buat file konfigurasi untuk menentukan bahasa aplikasi Anda:
 
 ```typescript fileName="intlayer.config.ts"
@@ -401,7 +424,7 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Catatan tentang Persistensi:**
-> `setLocale` dari `useLocale` sisi klien menyimpan preferensi bahasa pengguna dalam cookie. Hal ini memungkinkan middleware Intlayer untuk mengingat pilihan dan secara otomatis mengarahkan pengguna ke bahasa pilihan mereka pada kunjungan berikutnya.
+> `setLocale` dari `useLocale` sisi klien menyimpan preferensi bahasa pengguna dalam cookie. Ini memungkinkan Intlayer untuk mengingat pilihan dan secara otomatis mengarahkan pengguna ke bahasa pilihan mereka pada kunjungan berikutnya: halaman yang dirender sesuai permintaan (adaptor dengan `output: 'server'` atau `prerender = false`) dialihkan oleh middleware Intlayer sebelum HTML apa pun dikirim, sementara halaman yang dirender sebelumnya, yang disajikan sebagai file statis, dialihkan oleh skrip kecil yang disuntikkan integrasi di setiap halaman. Atur `routing.enableProxy` ke `false` untuk mematikan keduanya. Di `astro dev`, cookie diabaikan sebagai sumber pengalihan kecuali `routing.enableProxy` disetel ke `true`, sehingga cookie basi tidak dapat membajak halaman yang sedang Anda kerjakan.
 >
 > **Kompatibilitas Server / Klien:**
 > `astro-intlayer` menyelesaikan ke hook server di frontmatter (membaca `Astro.locals`) dan ke hook klien `vanilla-intlayer` di blok `<script>` dan pulau (islands), dengan nama dan bentuk konten yang sama. `setLocale` dan `onChange` hanya bertindak di klien, panggil `installIntlayer()` sekali di sana untuk menginisialisasi penyimpanan klien. `astro-intlayer/client` mengekspos entri klien secara eksplisit.
@@ -428,10 +451,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -472,11 +495,12 @@ export const GET: APIRoute = ({ site }) => {
 
 Lanjutkan membangun aplikasi Anda menggunakan framework pilihan Anda.
 
-- Intlayer + React: [Intlayer dengan React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer dengan Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer dengan Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer dengan Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer dengan Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer dengan React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer dengan Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer dengan Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer dengan Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer dengan Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer dengan Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Ekstrak konten komponen Anda" isOptional={true}>
@@ -542,21 +566,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compiler Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Build aplikasi Anda untuk mentransformasi komponen Anda dan mengekstrak konten
 
 ```bash packageManager="npm"
 npm run build # Atau npm run dev

package/docs/id/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + Lit multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Penggunaan hook useIntlayer / useLocale dari astro-intlayer di halaman Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   Paket inti yang menyediakan alat i18n untuk manajemen konfigurasi, terjemahan, [deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md), transpilasyon, dan [perintah CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/index.md).
 
 - **astro-intlayer**
-  Plugin integrasi Astro untuk menghubungkan Intlayer dengan [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production); juga mencakup middleware untuk mendeteksi bahasa pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.
+  Menyertakan plugin integrasi Astro untuk mengintegrasikan Intlayer dengan [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), middleware yang menyelesaikan lokal setiap permintaan ke dalam `Astro.locals.intlayer`, dan hook `useIntlayer` / `useDictionary` / `useLocale`. Jalur impor yang sama menyelesaikan ke implementasi server di frontmatter `.astro` Anda dan ke implementasi klien (didukung oleh `vanilla-intlayer`) di blok `<script>`.
 
 - **lit**
   Paket inti Lit untuk membangun Web Components yang cepat dan ringan.
@@ -165,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="Konfigurasikan Proyek Anda">
 
+### Arsitektur
+
+Dalam arsitektur ini, integrasi `intlayer()` yang didaftarkan di `astro.config.ts` membangun kamus Anda dan menambahkan middleware yang menyelesaikan locale setiap permintaan serta mengeksposnya di `Astro.locals.intlayer`. Halaman berada di bawah segmen rest `src/pages/[...locale]/`, sehingga locale default disajikan tanpa awalan dan setiap locale lainnya mendapatkan URL khusus sendiri. File `.astro` membaca konten dengan hook `useIntlayer` / `useLocale` dari `astro-intlayer` untuk rendering server, dan pulau Lit (`src/components/lit/LitDemo.ts`) menerima locale yang terdeteksi server sebagai prop dan meneruskannya ke `lit-intlayer` untuk bagian interaktif. Deklarasi konten ditempatkan bersama komponen Anda di `src/`.
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfigurasi
+
 Buat file konfigurasi untuk menentukan bahasa aplikasi Anda:
 
 ```typescript fileName="intlayer.config.ts"
@@ -246,19 +273,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Menggunakan Konten di Astro">
 
-Anda dapat mengonsumsi kamus langsung di file `.astro` menggunakan pembantu inti yang diekspor dari `intlayer`. Anda juga harus menambahkan metadata SEO (seperti hreflang dan tautan kanonikal) di setiap halaman. Elemen kustom Lit diimpor melalui blok `<script>` sisi klien dan ditempatkan di body.
+Gunakan kamus Anda dalam file `.astro` dengan hook yang diekspor oleh `astro-intlayer`. Mereka memiliki tanda tangan yang sama dengan `react-intlayer`: `useIntlayer("key")` mengembalikan konten kamus dan `useLocale()` mengembalikan lokal saat ini, tanpa argumen yang perlu diteruskan.
+
+Lokal berasal dari middleware `astro-intlayer`, yang didaftarkan oleh integrasi sebelum `src/middleware.ts` Anda sendiri. Ini menyelesaikannya untuk setiap permintaan, dari awalan URL, kemudian lokal yang disimpan oleh klien (cookie atau header), lalu `Accept-Language`, dan menyimpannya di `Astro.locals.intlayer`. Halaman yang dirender sebelumnya hanya menggunakan URL, karena halaman tersebut dirender sekali untuk setiap pengunjung.
+
+Elemen kustom Lit diimpor melalui blok `<script>` sisi klien dan ditempatkan di body.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 
 export const getStaticPaths = () => {
@@ -267,8 +296,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Lokal diselesaikan oleh middleware (mis. /id/about -> 'id')
+const { locale } = useLocale();
+
+// Konten kamus 'lit-demo' untuk lokal tersebut
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -327,6 +359,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` juga mengekspos `locale`, `defaultLocale`, dan `availableLocales` ke middleware dan endpoint Anda sendiri. Teruskan lokal atau pemilih sebagai argumen kedua (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) untuk mengganti lokal permintaan untuk satu panggilan.
+
 > **Catatan tentang Penyiapan Perutean:**
 > Struktur direktori yang Anda gunakan bergantung pada pengaturan `middleware.routing` di `intlayer.config.ts`:
 >
@@ -483,10 +517,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -586,21 +620,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compiler Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Build aplikasi Anda untuk mentransformasi komponen Anda dan mengekstrak konten
 
 ```bash packageManager="npm"
 npm run build # Atau npm run dev

package/docs/id/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + Preact multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Penggunaan hook useIntlayer / useLocale dari astro-intlayer di halaman Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   Paket inti yang menyediakan alat i18n untuk manajemen konfigurasi, terjemahan, [deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md), transpilasyon, dan [perintah CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/index.md).
 
 - **astro-intlayer**
-  Plugin integrasi Astro untuk menghubungkan Intlayer dengan [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production); juga mencakup middleware untuk mendeteksi bahasa pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.
+  Menyertakan plugin integrasi Astro untuk mengintegrasikan Intlayer dengan [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), middleware yang menyelesaikan lokal setiap permintaan ke dalam `Astro.locals.intlayer`, dan hook `useIntlayer` / `useDictionary` / `useLocale`. Jalur impor yang sama menyelesaikan ke implementasi server di frontmatter `.astro` Anda dan ke implementasi klien (didukung oleh `vanilla-intlayer`) di blok `<script>`.
 
 - **preact**
   Paket inti Preact - alternatif yang cepat dan ringan untuk React.
@@ -164,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="Konfigurasikan Proyek Anda">
 
+### Arsitektur
+
+Dalam arsitektur ini, integrasi `intlayer()` yang didaftarkan di `astro.config.ts` membangun kamus Anda dan menambahkan middleware yang menyelesaikan locale setiap permintaan serta mengeksposnya di `Astro.locals.intlayer`. Halaman berada di bawah segmen rest `src/pages/[...locale]/`, sehingga locale default disajikan tanpa awalan dan setiap locale lainnya mendapatkan URL khusus sendiri. File `.astro` membaca konten dengan hook `useIntlayer` / `useLocale` dari `astro-intlayer` untuk rendering server, dan pulau Preact (`src/components/preact/PreactIsland.tsx`) menerima locale yang terdeteksi server sebagai prop dan meneruskannya ke `preact-intlayer` untuk bagian interaktif. Deklarasi konten ditempatkan bersama komponen Anda di `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── preact
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── PreactIsland.tsx      # Preact island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and preact() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfigurasi
+
 Buat file konfigurasi untuk menentukan bahasa aplikasi Anda:
 
 ```typescript fileName="intlayer.config.ts"
@@ -243,19 +271,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Menggunakan Konten di Astro">
 
-Anda dapat mengonsumsi kamus langsung di file `.astro` menggunakan pembantu inti yang diekspor dari `intlayer`. Anda juga harus menambahkan metadata SEO (seperti hreflang dan tautan kanonikal) di setiap halaman dan memperkenalkan island Preact untuk konten interaktif di sisi klien.
+Gunakan kamus Anda dalam file `.astro` dengan hook yang diekspor oleh `astro-intlayer`. Mereka memiliki tanda tangan yang sama dengan `react-intlayer`: `useIntlayer("key")` mengembalikan konten kamus dan `useLocale()` mengembalikan lokal saat ini, tanpa argumen yang perlu diteruskan.
+
+Lokal berasal dari middleware `astro-intlayer`, yang didaftarkan oleh integrasi sebelum `src/middleware.ts` Anda sendiri. Ini menyelesaikannya untuk setiap permintaan, dari awalan URL, kemudian lokal yang disimpan oleh klien (cookie atau header), lalu `Accept-Language`, dan menyimpannya di `Astro.locals.intlayer`. Halaman yang dirender sebelumnya hanya menggunakan URL, karena halaman tersebut dirender sekali untuk setiap pengunjung.
+
+Anda juga harus menambahkan metadata SEO (seperti hreflang dan tautan kanonikal) di setiap halaman dan memperkenalkan island Preact untuk konten interaktif di sisi klien.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { PreactIsland } from "../../components/preact/ReactIsland";
 
@@ -265,8 +295,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Lokal diselesaikan oleh middleware (mis. /id/about -> 'id')
+const { locale } = useLocale();
+
+// Konten kamus 'app' untuk lokal tersebut
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -322,6 +355,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` juga mengekspos `locale`, `defaultLocale`, dan `availableLocales` ke middleware dan endpoint Anda sendiri. Teruskan lokal atau pemilih sebagai argumen kedua (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) untuk mengganti lokal permintaan untuk satu panggilan.
+
 > **Catatan tentang Penyiapan Perutean:**
 > Struktur direktori yang Anda gunakan bergantung pada pengaturan `middleware.routing` di `intlayer.config.ts`:
 >
@@ -438,10 +473,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -541,21 +576,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compiler Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Build aplikasi Anda untuk mentransformasi komponen Anda dan mengekstrak konten
 
 ```bash packageManager="npm"
 npm run build # Atau npm run dev

package/docs/id/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + React i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + React multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Penggunaan hook useIntlayer / useLocale dari astro-intlayer di halaman Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Perbarui penggunaan API useIntlayer Solid ke akses properti langsung"
@@ -153,7 +156,7 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
   Paket inti yang menyediakan alat i18n untuk manajemen konfigurasi, terjemahan, [deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md), transpilasyon, dan [perintah CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/index.md).
 
 - **astro-intlayer**
-  Plugin integrasi Astro untuk menghubungkan Intlayer dengan [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production); juga mencakup middleware untuk mendeteksi bahasa pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.
+  Menyertakan plugin integrasi Astro untuk mengintegrasikan Intlayer dengan [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), middleware yang menyelesaikan lokal setiap permintaan ke dalam `Astro.locals.intlayer`, dan hook `useIntlayer` / `useDictionary` / `useLocale`. Jalur impor yang sama menyelesaikan ke implementasi server di frontmatter `.astro` Anda dan ke implementasi klien (didukung oleh `vanilla-intlayer`) di blok `<script>`.
 
 - **react**, **react-dom**
   Paket inti React yang digunakan untuk merender komponen React di browser.
@@ -167,6 +170,31 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 </Step>
 <Step number={2} title="Konfigurasikan Proyek Anda">
 
+### Arsitektur
+
+Dalam arsitektur ini, integrasi `intlayer()` yang didaftarkan di `astro.config.ts` membangun kamus Anda dan menambahkan middleware yang menyelesaikan locale setiap permintaan serta mengeksposnya di `Astro.locals.intlayer`. Halaman berada di bawah segmen rest `src/pages/[...locale]/`, sehingga locale default disajikan tanpa awalan dan setiap locale lainnya mendapatkan URL khusus sendiri. File `.astro` membaca konten dengan hook `useIntlayer` / `useLocale` dari `astro-intlayer` untuk rendering server, dan pulau React (`src/components/react/ReactIsland.tsx`) menerima locale yang terdeteksi server sebagai prop dan meneruskannya ke `react-intlayer` untuk bagian interaktif. Deklarasi konten ditempatkan bersama komponen Anda di `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── react
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── ReactIsland.tsx       # React island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and react() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfigurasi
+
 Buat file konfigurasi untuk menentukan bahasa aplikasi Anda:
 
 ```typescript fileName="intlayer.config.ts"
@@ -243,19 +271,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Menggunakan Konten di Astro">
 
-Anda dapat mengonsumsi kamus langsung di file `.astro` menggunakan pembantu inti yang diekspor dari `intlayer`. Anda juga harus menambahkan metadata SEO (seperti hreflang dan tautan kanonikal) di setiap halaman dan memperkenalkan island React untuk konten interaktif di sisi klien.
+Gunakan kamus Anda dalam file `.astro` dengan hook yang diekspor oleh `astro-intlayer`. Mereka memiliki tanda tangan yang sama dengan `react-intlayer`: `useIntlayer("key")` mengembalikan konten kamus dan `useLocale()` mengembalikan lokal saat ini, tanpa argumen yang perlu diteruskan.
+
+Lokal berasal dari middleware `astro-intlayer`, yang didaftarkan oleh integrasi sebelum `src/middleware.ts` Anda sendiri. Ini menyelesaikannya untuk setiap permintaan, dari awalan URL, kemudian lokal yang disimpan oleh klien (cookie atau header), lalu `Accept-Language`, dan menyimpannya di `Astro.locals.intlayer`. Halaman yang dirender sebelumnya hanya menggunakan URL, karena halaman tersebut dirender sekali untuk setiap pengunjung.
+
+Anda juga harus menambahkan metadata SEO (seperti hreflang dan tautan kanonikal) di setiap halaman dan memperkenalkan island React untuk konten interaktif di sisi klien.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { ReactIsland } from "../../components/react/ReactIsland";
 
@@ -265,8 +295,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Lokal diselesaikan oleh middleware (mis. /id/about -> 'id')
+const { locale } = useLocale();
+
+// Konten kamus 'app' untuk lokal tersebut
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -322,6 +355,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` juga mengekspos `locale`, `defaultLocale`, dan `availableLocales` ke middleware dan endpoint Anda sendiri. Teruskan lokal atau pemilih sebagai argumen kedua (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) untuk mengganti lokal permintaan untuk satu panggilan.
+
 > **Catatan tentang Penyiapan Perutean:**
 > Struktur direktori yang Anda gunakan bergantung pada pengaturan `middleware.routing` di `intlayer.config.ts`:
 >
@@ -434,10 +469,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -537,21 +572,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compiler Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Build aplikasi Anda untuk mentransformasi komponen Anda dan mengekstrak konten
 
 ```bash packageManager="npm"
 npm run build # Atau npm run dev