@intlayer/docs 7.0.7 → 7.0.8

package/docs/id/CI_CD.md

@@ -0,0 +1,198 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-08-13
+title: Integrasi CI/CD
+description: Pelajari cara mengintegrasikan Intlayer ke dalam pipeline CI/CD Anda untuk manajemen konten dan deployment otomatis.
+keywords:
+  - CI/CD
+  - Integrasi Berkelanjutan
+  - Deployment Berkelanjutan
+  - Otomatisasi
+  - Internasionalisasi
+  - Dokumentasi
+  - Intlayer
+slugs:
+  - doc
+  - concept
+  - ci-cd
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Menghasilkan Terjemahan Otomatis dalam Pipeline CI/CD
+
+Intlayer memungkinkan pembuatan terjemahan secara otomatis untuk file deklarasi konten Anda. Ada beberapa cara untuk mencapainya tergantung pada alur kerja Anda.
+
+## Daftar Isi
+
+<TOC/>
+
+## Menggunakan CMS
+
+Dengan Intlayer, Anda dapat mengadopsi alur kerja di mana hanya satu locale yang dideklarasikan secara lokal, sementara semua terjemahan dikelola secara remote melalui CMS. Ini memungkinkan konten dan terjemahan benar-benar terpisah dari codebase, memberikan fleksibilitas lebih bagi editor konten dan memungkinkan Live Sync (tidak perlu membangun ulang aplikasi untuk menerapkan perubahan).
+
+### Contoh Konfigurasi
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.SPANISH, Locales.FRENCH],
+    requiredLocales: [Locales.ENGLISH], // Locale opsional akan dikelola secara remote
+    defaultLocale: Locales.ENGLISH,
+  },
+  editor: {
+    // Kredensial CMS jika Anda menggunakan CMS
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    liveSync: true,
+  },
+  ai: {
+    applicationContext: "Ini adalah aplikasi uji", // Membantu memastikan konsistensi dalam pembuatan terjemahan
+  },
+};
+
+export default config;
+```
+
+Untuk mempelajari lebih lanjut tentang CMS, lihat [dokumentasi resmi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).
+
+## Menggunakan Husky
+
+Anda dapat mengintegrasikan pembuatan terjemahan ke dalam alur kerja Git lokal Anda menggunakan [Husky](https://typicode.github.io/husky/).
+
+### Contoh Konfigurasi
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.SPANISH, Locales.FRENCH],
+    requiredLocales: [Locales.ENGLISH], // Locale opsional ditangani secara remote
+    defaultLocale: Locales.ENGLISH,
+  },
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+  ai: {
+    provider: "openai",
+    apiKey: process.env.OPENAI_API_KEY, // Gunakan API key Anda sendiri
+
+    applicationContext: "Ini adalah aplikasi uji", // Membantu memastikan konsistensi dalam pembuatan terjemahan
+  },
+};
+
+export default config;
+```
+
+```bash fileName=".husky/pre-push"
+npx intlayer build                          # Untuk memastikan kamus sudah diperbarui
+npx intlayer fill --unpushed --mode fill    # Hanya mengisi konten yang hilang, tidak memperbarui yang sudah ada
+```
+
+> Untuk informasi lebih lanjut tentang perintah Intlayer CLI dan penggunaannya, lihat [dokumentasi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_cli.md).
+
+> Jika Anda memiliki beberapa aplikasi dalam repo Anda yang menggunakan instance intlayer terpisah, Anda dapat menggunakan argumen `--base-dir` seperti ini:
+
+```bash fileName=".husky/pre-push"
+# Aplikasi 1
+npx intlayer build --base-dir ./app1
+npx intlayer fill --base-dir ./app1 --unpushed --mode fill
+
+# Aplikasi 2
+npx intlayer build --base-dir ./app2
+npx intlayer fill --base-dir ./app2 --unpushed --mode fill
+```
+
+## Menggunakan GitHub Actions
+
+Intlayer menyediakan perintah CLI untuk mengisi otomatis dan meninjau konten kamus. Ini dapat diintegrasikan ke dalam alur kerja CI/CD Anda menggunakan GitHub Actions.
+
+```yaml fileName=".github/workflows/intlayer-translate.yml"
+name: Intlayer Auto-Fill
+# Kondisi pemicu untuk workflow ini
+on:
+  pull_request:
+    branches:
+      - "main"
+
+permissions:
+  contents: write
+  pull-requests: write
+
+concurrency:
+  group: "autofill-${{ github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  autofill:
+    runs-on: ubuntu-latest
+    env:
+      # OpenAI
+      AI_MODEL: openai
+      AI_PROVIDER: gpt-5-mini
+      AI_API_KEY: ${{ secrets.AI_API_KEY }}
+
+    steps:
+      # Langkah 1: Ambil kode terbaru dari repositori
+      - name: ⬇️ Checkout repository
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: true # Simpan kredensial untuk membuat PR
+          fetch-depth: 0 # Ambil seluruh riwayat git untuk analisis diff
+
+      # Langkah 2: Siapkan lingkungan Node.js
+      - name: 🟢 Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20 # Gunakan Node.js 20 LTS untuk stabilitas
+
+      # Langkah 3: Instal dependensi proyek
+      - name: 📦 Instal dependensi
+        run: npm install
+
+      # Langkah 4: Instal Intlayer CLI secara global untuk manajemen terjemahan
+      - name: 📦 Instal Intlayer
+        run: npm install -g intlayer-cli
+
+      # Langkah 5: Bangun proyek Intlayer untuk menghasilkan file terjemahan
+      - name: ⚙️ Bangun proyek Intlayer
+        run: npx intlayer build
+
+      # Langkah 6: Gunakan AI untuk mengisi otomatis terjemahan yang hilang
+      - name: 🤖 Isi otomatis terjemahan yang hilang
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # Langkah 7: Periksa jika ada perubahan dan commit perubahan tersebut
+      - name: � Periksa perubahan
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # Langkah 8: Commit dan push perubahan jika ada
+      - name: 📤 Commit dan push perubahan
+        if: steps.check-changes.outputs.has-changes == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "chore: auto-fill missing translations [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
+```
+
+Untuk mengatur variabel lingkungan, buka GitHub → Settings → Secrets and variables → Actions dan tambahkan secret tersebut.
+
+> Sama seperti untuk Husky, dalam kasus monorepo, Anda dapat menggunakan argumen `--base-dir` untuk memproses setiap aplikasi secara berurutan.
+
+> Secara default, argumen `--git-diff` memfilter kamus yang mencakup perubahan dari basis (default `origin/main`) ke cabang saat ini (default: `HEAD`).
+
+> Untuk informasi lebih lanjut tentang perintah Intlayer CLI dan penggunaannya, lihat [dokumentasi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_cli.md).

package/docs/id/autoFill.md

@@ -0,0 +1,284 @@
+---
+createdAt: 2025-03-13
+updatedAt: 2025-09-20
+title: Isi Otomatis
+description: Pelajari cara menggunakan fungsi isi otomatis di Intlayer untuk mengisi konten secara otomatis berdasarkan pola yang telah ditentukan. Ikuti dokumentasi ini untuk mengimplementasikan fitur isi otomatis secara efisien dalam proyek Anda.
+keywords:
+  - Isi Otomatis
+  - Otomatisasi Konten
+  - Konten Dinamis
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - auto-fill
+history:
+  - version: 7.0.0
+    date: 2025-10-23
+    changes: Mengganti nama `autoFill` menjadi `fill` dan memperbarui perilaku
+  - version: 6.0.0
+    date: 2025-09-20
+    changes: Menambahkan konfigurasi global
+  - version: 6.0.0
+    date: 2025-09-17
+    changes: Menambahkan variabel `{{fileName}}`
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Inisialisasi riwayat
+---
+
+# Terjemahan File Deklarasi Isi Konten
+
+**File deklarasi isi otomatis** dalam CI Anda adalah cara untuk mempercepat alur kerja pengembangan Anda.
+
+## Perilaku Default
+
+Secara default, `fill` diatur ke `true` secara global, yang berarti Intlayer akan secara otomatis mengisi semua file konten dan mengedit file itu sendiri. Perilaku ini dapat disesuaikan dengan beberapa cara:
+
+### Opsi Konfigurasi Global
+
+1. **`fill: true` (default)** - Secara otomatis mengisi semua locale dan mengedit file saat ini
+2. **`fill: false`** - Menonaktifkan isi otomatis untuk file konten ini
+3. **`fill: "path/to/file"`** - Membuat/memperbarui file yang ditentukan tanpa mengedit file saat ini
+4. **`fill: { [key in Locales]?: string }`** - Membuat/memperbarui file yang ditentukan untuk setiap locale
+
+### Perubahan Perilaku di v7
+
+Pada v7, perilaku perintah `fill` telah diperbarui:
+
+- **`fill: true`** - Menulis ulang file saat ini dengan konten yang diisi untuk semua locale
+- **`fill: "path/to/file"`** - Mengisi file yang ditentukan tanpa memodifikasi file saat ini
+- **`fill: false`** - Menonaktifkan isi otomatis sepenuhnya
+
+Saat menggunakan opsi path untuk menulis ke file lain, mekanisme isi bekerja melalui hubungan _master-slave_ antara file deklarasi konten. File utama (master) berfungsi sebagai sumber kebenaran, dan ketika diperbarui, Intlayer akan secara otomatis menerapkan perubahan tersebut ke file deklarasi turunan (yang diisi) yang ditentukan oleh path.
+
+### Kustomisasi Per-Locale
+
+Anda juga dapat menyesuaikan perilaku untuk setiap locale dengan menggunakan sebuah objek:
+
+```ts fileName="intlayer.config.ts"
+const config: IntlayerConfig = {
+  content: {
+    internationalization: {
+      locales: [Locales.ENGLISH, Locales.FRENCH, Locales.POLISH],
+      defaultLocale: Locales.ENGLISH,
+      requiredLocales: [Locales.ENGLISH], // Disarankan untuk menghindari Property 'pl' hilang dalam tipe '{ en: string; xxx } pada fungsi t Anda jika
+    },
+  },
+  dictionary: {
+    fill: {
+      en: true, // Isi dan edit file saat ini untuk bahasa Inggris
+      fr: "./translations/fr.json", // Buat file terpisah untuk bahasa Prancis
+      es: false, // Nonaktifkan isi untuk bahasa Spanyol
+    },
+  },
+};
+```
+
+Ini memungkinkan Anda memiliki perilaku isi yang berbeda untuk berbagai locale dalam proyek yang sama.
+
+```ts fileName="src/components/example/example.content.ts"
+import { Locales, type Dictionary } from "intlayer";
+
+const exampleContent = {
+  key: "example",
+  locale: Locales.ENGLISH,
+  fill: "./example.content.json",
+  content: {
+    contentExample: "Ini adalah contoh konten",
+  },
+} satisfies Dictionary;
+
+export default exampleContent;
+```
+
+Berikut adalah [file deklarasi konten per-locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/per_locale_file.md) yang menggunakan instruksi `fill`.
+
+Kemudian, ketika Anda menjalankan perintah berikut:
+
+```bash
+npx intlayer fill --file 'src/components/example/example.content.ts'
+```
+
+Intlayer akan secara otomatis menghasilkan file deklarasi turunan di `src/components/example/example.content.json`, mengisi semua locale yang belum dideklarasikan di file utama.
+
+```json5 fileName="src/components/example/example.content.json"
+{
+  "key": "example",
+  "content": {
+    "contentExample": {
+      "nodeType": "translation",
+      "translation": {
+        "fr": "Ceci est un exemple de contenu",
+        "es": "Este es un ejemplo de contenido",
+      },
+    },
+  },
+}
+```
+
+Setelah itu, kedua file deklarasi akan digabungkan menjadi satu kamus, yang dapat diakses menggunakan hook standar `useIntlayer("example")` (react) / composable (vue).
+
+## Konfigurasi Global
+
+Anda dapat mengonfigurasi konfigurasi auto fill global di file `intlayer.config.ts`.
+
+```ts fileName="intlayer.config.ts"
+import { type IntlayerConfig, Locales } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+    requiredLocales: [Locales.ENGLISH, Locales.FRENCH],
+  },
+  dictionary: {
+    // Menghasilkan terjemahan yang hilang secara otomatis untuk semua kamus
+    fill: "./{{fileName}}Filled.content.ts",
+    //
+    // fill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",
+    //
+    // fill: true, // menghasilkan terjemahan yang hilang secara otomatis untuk semua kamus seperti menggunakan "./{{fileName}}.content.json"
+    //
+    // fill: {
+    //   en: "./{{fileName}}.en.content.json",
+    //   fr: "./{{fileName}}.fr.content.json",
+    //   es: "./{{fileName}}.es.content.json",
+    // },
+  },
+};
+
+export default config;
+```
+
+Anda masih dapat menyempurnakan per kamus menggunakan field `fill` di file konten. Intlayer akan terlebih dahulu mempertimbangkan konfigurasi per kamus kemudian menggunakan konfigurasi global sebagai cadangan.
+
+## Format File Autofilled
+
+Format yang direkomendasikan untuk file deklarasi yang diisi otomatis adalah **JSON**, yang membantu menghindari kendala format. Namun, Intlayer juga mendukung format `.ts`, `.js`, `.mjs`, `.cjs`, dan format lainnya.
+
+```ts fileName="src/components/example/example.content.ts"
+const exampleContent = {
+  key: "example",
+  fill: "./example.filled.content.ts",
+  content: {
+    // Konten Anda
+  },
+};
+```
+
+Ini akan menghasilkan file di:
+
+```
+src/components/example/example.filled.content.ts
+```
+
+> Proses pembuatan file `.js`, `.ts`, dan file serupa bekerja sebagai berikut:
+>
+> - Jika file sudah ada, Intlayer akan memparsenya menggunakan AST (Abstract Syntax Tree) untuk menemukan setiap field dan menyisipkan terjemahan yang hilang.
+> - Jika file tidak ada, Intlayer akan membuatnya menggunakan template file deklarasi konten default.
+
+## Path Absolut
+
+Field `fill` juga mendukung path absolut.
+
+```ts fileName="src/components/example/example.content.ts"
+const exampleContent = {
+  key: "example",
+  fill: "/messages/example.content.json",
+  content: {
+    // Konten Anda
+  },
+};
+```
+
+Ini akan menghasilkan file di:
+
+```
+/messages/example.content.json
+```
+
+## Autogenerate File Deklarasi Konten Per-Locale
+
+Field `fill` juga mendukung pembuatan file deklarasi konten **per-locale**.
+
+```ts fileName="src/components/example/example.content.ts"
+const exampleContent = {
+  key: "example",
+  fill: {
+    fr: "./example.fr.content.json",
+    es: "./example.es.content.json",
+  },
+  content: {
+    // Konten Anda
+  },
+};
+```
+
+Ini akan menghasilkan dua file terpisah:
+
+- `src/components/example/example.fr.content.json`
+- `src/components/example/example.es.content.json`
+
+> Dalam kasus ini, jika objek tidak berisi semua locale, Intlayer akan melewati pembuatan locale yang tersisa.
+
+## Filter Autofill Locale Tertentu
+
+Menggunakan objek untuk field `fill` memungkinkan Anda menerapkan filter dan hanya menghasilkan file locale tertentu.
+
+```ts fileName="src/components/example/example.content.ts"
+const exampleContent = {
+  key: "example",
+  fill: {
+    fr: "./example.fr.content.json",
+  },
+  content: {
+    // Konten Anda
+  },
+};
+```
+
+Ini hanya akan menghasilkan file terjemahan bahasa Prancis.
+
+## Variabel Path
+
+Anda dapat menggunakan variabel di dalam path `fill` untuk secara dinamis menentukan jalur target untuk file yang dihasilkan.
+
+**Variabel yang tersedia:**
+
+- `{{locale}}` – Kode locale (misalnya `fr`, `es`)
+- `{{fileName}}` – Nama file (misalnya `index`)
+- `{{key}}` – Kunci kamus (misalnya `example`)
+
+```ts fileName="src/components/example/index.content.ts"
+const exampleContent = {
+  key: "example",
+  fill: "/messages/{{locale}}/{{key}}.content.json",
+  content: {
+    // Konten Anda
+  },
+};
+```
+
+Ini akan menghasilkan:
+
+- `/messages/fr/example.content.json`
+- `/messages/es/example.content.json`
+
+```ts fileName="src/components/example/index.content.ts"
+const exampleContent = {
+  key: "example",
+  fill: "./{{fileName}}.content.json",
+  content: {
+    // Konten Anda
+  },
+};
+```
+
+Ini akan menghasilkan:
+
+- `./index.content.json`
+- `./index.content.json`

package/docs/id/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Membuat komponen multibahasa (perpustakaan i18n) di React dan Next.js
+description: Pelajari cara mendeklarasikan dan mengambil konten yang dilokalkan untuk membangun komponen React atau Next.js multibahasa dengan Intlayer.
+keywords:
+  - i18n
+  - komponen
+  - react
+  - multibahasa
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Cara membuat komponen multibahasa (i18n) dengan Intlayer
+
+Panduan ini menunjukkan langkah minimal untuk membuat komponen UI multibahasa dalam dua pengaturan umum:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Anda akan terlebih dahulu mendeklarasikan konten Anda, kemudian mengambilnya di dalam komponen Anda.
+
+## 1) Deklarasikan konten Anda (dibagikan untuk React dan Next.js)
+
+Buat file deklarasi konten di dekat komponen Anda. Ini menjaga terjemahan tetap dekat dengan tempat mereka digunakan dan memungkinkan keamanan tipe.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+JSON juga didukung jika Anda lebih suka menggunakan file konfigurasi.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) Ambil konten Anda
+
+### Kasus A — Aplikasi React (Vite/SPA)
+
+Pendekatan default: gunakan `useIntlayer` untuk mengambil berdasarkan key. Ini menjaga komponen tetap ramping dan bertipe.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Rendering sisi server atau di luar provider: gunakan `react-intlayer/server` dan berikan `locale` secara eksplisit saat diperlukan.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+Alternatif: `useDictionary` dapat membaca seluruh objek yang dideklarasikan jika Anda lebih suka menempatkan struktur di lokasi pemanggilan.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### Kasus B — Next.js (App Router)
+
+Utamakan komponen server untuk keamanan data dan performa. Gunakan `useIntlayer` dari `next-intlayer/server` di file server, dan `useIntlayer` dari `next-intlayer` di komponen klien.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Tip: Untuk metadata halaman dan SEO, Anda juga dapat mengambil konten menggunakan `getIntlayer` dan menghasilkan URL multibahasa melalui `getMultilingualUrls`.
+
+## Mengapa pendekatan komponen Intlayer adalah yang terbaik
+
+- **Kolokasi**: Deklarasi konten berada dekat dengan komponen, mengurangi pergeseran dan meningkatkan penggunaan ulang di seluruh sistem desain.
+- **Keamanan tipe**: Kunci dan struktur memiliki tipe yang kuat; terjemahan yang hilang muncul saat build-time, bukan saat runtime.
+- **Server-first**: Bekerja secara native di komponen server untuk keamanan dan performa yang lebih baik; hooks klien tetap ergonomis.
+- **Tree-shaking**: Hanya konten yang digunakan oleh komponen yang dibundel, menjaga ukuran payload tetap kecil pada aplikasi besar.
+- **DX & tooling**: Middleware bawaan, helper SEO, dan terjemahan Visual Editor/AI opsional mempermudah pekerjaan sehari-hari.
+
+Lihat perbandingan dan pola dalam rangkuman yang berfokus pada Next.js: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Panduan dan referensi terkait
+
+- Setup React (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- Mulai TanStack: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Setup Next.js: https://intlayer.org/doc/environment/nextjs
+- Mengapa Intlayer dibandingkan dengan next-intl dan next-i18next - https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+Halaman-halaman ini mencakup setup menyeluruh, penyedia, routing, dan helper SEO.