@intlayer/docs 8.3.0 → 8.3.2

package/docs/id/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-03-11
+updatedAt: 2026-03-12
 title: Konfigurasi
 description: Pelajari cara mengonfigurasi Intlayer untuk aplikasi Anda. Pahami berbagai pengaturan dan opsi yang tersedia untuk menyesuaikan Intlayer sesuai kebutuhan Anda.
 keywords:
@@ -15,7 +15,7 @@ slugs:
   - configuration
 history:
   - version: 8.3.0
-    data: 2026-03-11
+    date: 2026-03-11
     changes: Pindahkan 'baseDir' dari konfigurasi 'content' ke 'system'
   - version: 8.2.0
     date: 2026-03-09
@@ -110,7 +110,7 @@ Intlayer menerima format file konfigurasi JSON, JS, MJS, dan TS:
 
 ## Contoh file konfigurasi
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+````typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
 import { nextjsRewrite } from "intlayer/routing";
 import { z } from "zod";
@@ -208,7 +208,7 @@ const config: IntlayerConfig = {
      * Options: 'cookie', 'localStorage', 'sessionStorage', 'header', or an array of these.
      * Default: ['cookie', 'header']
      */
-    storage: "cookie",
+    storage: ["cookie", "header"],
 
     /**
      * Base path for the application URLs.
@@ -274,13 +274,13 @@ const config: IntlayerConfig = {
   editor: {
     /**
      * Whether the visual editor is enabled.
-     * Default: true
+     * Default: false
      */
     enabled: true,
 
     /**
      * URL of your application for origin validation.
-     * Default: "*"
+     * Default: ""
      */
     applicationURL: "http://localhost:3000",
 
@@ -344,7 +344,16 @@ const config: IntlayerConfig = {
     /**
      * Base URL for the AI API.
      */
-    baseURL: "http://localhost:3000",
+    /**
+     * Data serialisasi
+     *
+     * Opsi:
+     * - "json": Standar, andal; menggunakan lebih banyak token.
+     * - "toon": Token lebih sedikit, kurang konsisten dibandingkan JSON.
+     *
+     * Default: "json"
+     */
+    dataSerialization: "json",
   },
 
   /**
@@ -444,42 +453,70 @@ const config: IntlayerConfig = {
   compiler: {
     /**
      * Menunjukkan apakah kompiler harus diaktifkan.
+     *
+     * - false : Menonaktifkan kompiler.
+     * - true : Mengaktifkan kompiler.
+     * - "build-only" : Melewatkan kompiler selama pengembangan untuk mempercepat waktu mulai.
+     *
+     * Nilai default : false
      */
     enabled: true,
 
     /**
-     * Pattern to traverse the code to optimize.
+     * Mendefinisikan jalur file output. Menggantikan `outputDir`.
+     *
+     * - Jalur yang dimulai dengan `./` diselesaikan relatif terhadap direktori komponen.
+     * - Jalur yang dimulai dengan `/` diselesaikan relatif terhadap root proyek (`baseDir`).
+     *
+     * - Menyertakan variabel `{{locale}}` dalam jalur akan mengaktifkan pembuatan kamus yang dipisahkan berdasarkan bahasa.
+     *
+     * Contoh:
+     * ```ts
+     * {
+     *   // Buat file .content.ts multi-bahasa di sebelah komponen
+     *   output: ({ fileName, extension }) => `./${fileName}${extension}`,
+     *
+     *   // output: './{{fileName}}{{extension}}', // Padanan menggunakan string template
+     * }
+     * ```
+     *
+     * ```ts
+     * {
+     *   // Buat file JSON terpusat berdasarkan bahasa di root proyek
+     *   output: ({ key, locale }) => `/locales/${locale}/${key}.content.json`,
+     *
+     *   // output: '/locales/{{locale}}/{{key}}.content.json', // Padanan menggunakan string template
+     * }
+     * ```
+     *
+     * Daftar variabel:
+     *   - `fileName`: Nama file.
+     *   - `key`: Kunci konten.
+     *   - `locale`: Bahasa konten.
+     *   - `extension`: Ekstensi file.
+     *   - `componentFileName`: Nama file komponen.
+     *   - `componentExtension`: Ekstensi file komponen.
+     *   - `format`: Format kamus.
+     *   - `componentFormat`: Format kamus komponen.
+     *   - `componentDirPath`: Jalur direktori komponen.
      */
-    transformPattern: [
-      "**/*.{js,ts,mjs,cjs,jsx,tsx,vue,svelte}",
-      "!**/node_modules/**",
-    ],
+    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
 
     /**
-     * Pattern to exclude from the optimization.
-     */
-    excludePattern: ["**/node_modules/**"],
-
-    /**
-     * Direktori output untuk kamus yang dioptimalkan.
+     * Menunjukkan apakah komponen harus disimpan setelah ditransformasi.
+     * Dengan begitu, kompiler hanya perlu dijalankan sekali untuk mentransformasi aplikasi, lalu dapat dihapus.
      */
-    output: ({ key }) => `compiler/${key}.content.json`,
+    saveComponents: false,
 
     /**
-     * Masukkan konten saja dalam file yang dihasilkan, tanpa kunci.
+     * Masukkan konten saja dalam file yang dihasilkan. Berguna untuk output JSON i18next atau ICU MessageFormat per bahasa.
      */
     noMetadata: false,
 
     /**
      * Awalan kunci kamus
      */
-    dictionaryKeyPrefix: "", // Remove base prefix
-
-    /**
-     * Menunjukkan apakah komponen harus disimpan setelah ditransformasi.
-     * Dengan begitu, kompiler hanya perlu dijalankan sekali untuk mentransformasi aplikasi, lalu dapat dihapus.
-     */
-    saveComponents: false,
+    dictionaryKeyPrefix: "", // Tambahkan awalan opsional untuk kunci kamus yang diekstrak
   },
 
   /**
@@ -498,7 +535,7 @@ const config: IntlayerConfig = {
 };
 
 export default config;
-```
+````
 
 ## Referensi Konfigurasi
 
@@ -878,7 +915,7 @@ Pengaturan terkait penanganan konten dalam aplikasi, termasuk nama direktori, ek
 
 - **dictionariesDir**:
   - _Tipe_: `string`
-  - _Default_: `'.intlayer/dictionaries'`
+  - _Default_: `'.intlayer/dictionary'`
   - _Deskripsi_: Jalur direktori untuk menyimpan hasil sementara atau output.
 
 - **moduleAugmentationDir**:
@@ -894,12 +931,6 @@ Pengaturan terkait penanganan konten dalam aplikasi, termasuk nama direktori, ek
   - _Deskripsi_: Direktori untuk menyimpan kamus yang belum digabungkan.
   - _Contoh_: `'translations'`
 
-- **dictionariesDir**:
-  - _Tipe_: `string`
-  - _Default_: `'.intlayer/dictionary'`
-  - _Deskripsi_: Direktori untuk menyimpan kamus lokal.
-  - _Contoh_: `'translations'`
-
 - **typesDir**:
   - _Tipe_: `string`
   - _Default_: `'types'`
@@ -1100,24 +1131,6 @@ Opsi build berlaku untuk plugin `@intlayer/babel` dan `@intlayer/swc`.
   - _Catatan_: Opsi ini bergantung pada plugin `@intlayer/babel` dan `@intlayer/swc`.
   - _Catatan_: Pastikan semua kunci dideklarasikan secara statis dalam panggilan `useIntlayer`. Contoh: `useIntlayer('navbar')`.
 
-- **importMode**:
-  - _Catatan_: **Deprecated**: Use `dictionary.importMode` instead.
-  - _Tipe_: `'static' | 'dynamic' | 'fetch'`
-  - _Default_: `'static'`
-  - _Deskripsi_: Mengontrol bagaimana kamus diimpor.
-  - _Contoh_: `'dynamic'`
-  - _Catatan_: Mode yang tersedia:
-    - "static": Kamus diimpor secara statis. Mengganti `useIntlayer` dengan `useDictionary`.
-    - "dynamic": Kamus diimpor secara dinamis menggunakan Suspense. Mengganti `useIntlayer` dengan `useDictionaryDynamic`.
-    - "fetch": Kamus diambil secara dinamis menggunakan live sync API. Mengganti `useIntlayer` dengan `useDictionaryDynamic`.
-  - _Catatan_: Impor dinamis bergantung pada Suspense dan mungkin sedikit memengaruhi performa rendering.
-  - _Catatan_: Jika dinonaktifkan, semua locale akan dimuat sekaligus, meskipun tidak digunakan.
-  - _Catatan_: Opsi ini bergantung pada plugin `@intlayer/babel` dan `@intlayer/swc`.
-  - _Catatan_: Pastikan semua kunci dideklarasikan secara statis dalam panggilan `useIntlayer`. Contoh: `useIntlayer('navbar')`.
-  - _Catatan_: Opsi ini akan diabaikan jika `optimize` dinonaktifkan.
-  - _Catatan_: Jika diatur ke "live", hanya kamus yang menyertakan konten jarak jauh, dan diatur sebagai flag "live" yang akan diubah menjadi mode live. Yang lainnya akan diimpor secara dinamis sebagai mode "dynamic" untuk mengoptimalkan jumlah kueri pengambilan, dan kinerja pemuatan.
-  - _Catatan_: Mode live akan menggunakan API sinkronisasi live untuk mengambil kamus. Jika panggilan API gagal, kamus akan diimpor secara dinamis sebagai mode "dynamic".
-  - _Catatan_: Opsi ini tidak akan memengaruhi fungsi `getIntlayer`, `getDictionary`, `useDictionary`, `useDictionaryAsync` dan `useDictionaryDynamic`.
 - **checkTypes**:
   - _Tipe_: `boolean`
   - _Default_: `false`
@@ -1157,7 +1170,7 @@ Pengaturan yang mengontrol kompiler Intlayer, yang mengekstrak kamus langsung da
 
 - **dictionaryKeyPrefix**:
   - _Tipe_: `string`
-  - _Default_: `'comp-'`
+  - _Default_: `''`
   - _Deskripsi_: Awalan untuk kunci kamus yang diekstrak.
   - _Contoh_: `'my-key-'`
   - _Catatan_: Saat kamus diekstrak, kunci dihasilkan berdasarkan nama file. Awalan ini ditambahkan ke kunci yang dihasilkan untuk mencegah konflik.
@@ -1181,30 +1194,37 @@ Pengaturan yang mengontrol kompiler Intlayer, yang mengekstrak kamus langsung da
   - _Deskripsi_: Pola yang menentukan file mana yang harus dikecualikan selama optimasi.
   - _Contoh_: `['**/node_modules/**', '!**/node_modules/react/**']`
 
-- **outputDir**:
-  - _Tipe_: `string`
-  - _Default_: `'compiler'`
-  - _Deskripsi_: Direktori tempat kamus yang diekstrak akan disimpan, relatif terhadap jalur dasar proyek Anda.
-
 - **output**:
   - _Tipe_: `FilePathPattern`
-  - _Default_: `({ key }) => 'compiler/${key}.content.json'`
-  - _Deskripsi_: Mendefinisikan jalur file output. Menggantikan `outputDir`. Menangani variabel dinamis seperti `{{locale}}`, `{{key}}`, `{{fileName}}`, `{{extension}}`, `{{format}}`, `{{dirPath}}`, `{{componentFileName}}`, `{{componentExtension}}`, dan `{{componentFormat}}`. Dapat diatur sebagai string menggunakan format `'my/{{var}}/path'`, atau sebagai fungsi.
-  - _Catatan_: Jalur `./**/*` diselesaikan relatif terhadap komponen. Jalur `/**/*` diselesaikan relatif terhadap `baseDir` Intlayer.
-  - _Contoh_: `output: ({ locale, key }) => 'compiler/${locale}/${key}.json'`
+  - _Default_: `undefined`
+  - _Deskripsi_: Mendefinisikan jalur file output. Menggantikan `outputDir`. Menangani variabel dinamis melalui string template atau fungsi. Variabel yang didukung: `{{fileName}}`, `{{key}}`, `{{locale}}`, `{{extension}}`, `{{componentFileName}}`, `{{componentExtension}}`, `{{format}}`, `{{componentFormat}}`, dan `{{componentDirPath}}`.
+  - _Catatan_: Jalur yang dimulai dengan `./` diselesaikan relatif terhadap direktori komponen. Jalur yang dimulai dengan `/` diselesaikan relatif terhadap root proyek (`baseDir`).
+  - _Catatan_: Menyertakan variabel `{{locale}}` dalam jalur akan mengaktifkan pembuatan kamus yang dipisahkan berdasarkan bahasa.
+  - _Contoh_:
+    - **Buat file multi-bahasa di samping komponen**:
+    - String: `'./{{fileName}}{{extension}}'`
+    - Fungsi: `({ fileName, extension }) => \`./${fileName}${extension}\``
+
+    - **Output file JSON terpusat per bahasa**:
+    - String: `'/locales/{{locale}}/{{key}}.content.json'`
+    - Fungsi: `({ key, locale }) => \`/locales/${locale}/${key}.content.json\``
 
 - **noMetadata**:
   - _Tipe_: `boolean`
   - _Default_: `false`
   - _Deskripsi_: Menunjukkan apakah metadata harus disimpan dalam file. Jika benar, kompiler tidak akan menyimpan metadata kamus (kunci, pembungkus konten).
-  - _Catatan_: Berguna jika digunakan dengan plugin `loadJSON`.
-  - _Contoh_: Jika `true`:
+  - _Catatan_: Berguna jika digunakan dengan plugin `loadJSON`. Berguna untuk output JSON i18next atau ICU MessageFormat per bahasa.
+  - _Contoh_:
+    Jika `true` :
+
     ```json
     {
       "key": "value"
     }
     ```
+
     Jika `false`:
+
     ```json
     {
       "key": "value",

package/docs/id/intlayer_with_analog.md

@@ -344,8 +344,8 @@ Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinka
 
 Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke file `.gitignore` Anda:
 
-```plaintext
-# Abaikan file yang dihasilkan oleh Intlayer
+```bash
+#  Abaikan file yang dihasilkan oleh Intlayer
 .intlayer
 ```
 

package/docs/id/intlayer_with_angular.md

@@ -398,8 +398,8 @@ Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinka
 
 To do this, you can add the following instructions to your `.gitignore` file:
 
-```plaintext
-# Abaikan file yang dihasilkan oleh Intlayer
+```bash
+#  Abaikan file yang dihasilkan oleh Intlayer
 .intlayer
 ```
 

package/docs/id/intlayer_with_astro.md

@@ -226,8 +226,8 @@ Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinka
 
 Untuk melakukannya, Anda dapat menambahkan instruksi berikut ke file `.gitignore` Anda:
 
-```plaintext
-# Abaikan file yang dihasilkan oleh Intlayer
+```bash
+#  Abaikan file yang dihasilkan oleh Intlayer
 .intlayer
 ```
 

package/docs/id/intlayer_with_lynx+react.md

@@ -496,8 +496,8 @@ Ini yang memungkinkan fitur seperti:
 
 Untuk menghindari commit file yang dihasilkan otomatis oleh Intlayer, tambahkan berikut ini ke `.gitignore` Anda:
 
-```plaintext
-# Abaikan file yang dihasilkan oleh Intlayer
+```bash
+#  Abaikan file yang dihasilkan oleh Intlayer
 .intlayer
 ```
 

package/docs/id/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2025-12-30
+updatedAt: 2026-03-12
 title: Next.js i18n - Cara menerjemahkan aplikasi Next.js 16 di 2026
 description: Temukan cara membuat situs web Next.js 16 Anda menjadi multibahasa. Ikuti dokumentasi untuk melakukan internasionalisasi (i18n) dan menerjemahkannya.
 keywords:
@@ -1442,6 +1442,179 @@ return (
 > - atribut [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
 > - atribut [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
+### (Opsional) Langkah 1 : Ekstrak konten komponen Anda
+
+Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
+
+Untuk memudahkan proses ini, Intlayer mengusulkan [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/extract.md) untuk mengubah komponen Anda dan mengekstrak kontennya.
+
+Untuk mengaturnya, Anda dapat menambahkan bagian `compiler` di file `intlayer.config.ts` Anda:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Sisa konfigurasi Anda
+  compiler: {
+    /**
+     * Menunjukkan apakah compiler harus diaktifkan.
+     */
+    enabled: true,
+
+    /**
+     * Menentukan jalur file output
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
+     */
+    saveComponents: false,
+
+    /**
+     * Prefiks kunci kamus
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Sisa konfigurasi Anda
+  compiler: {
+    /**
+     * Menunjukkan apakah compiler harus diaktifkan.
+     */
+    enabled: true,
+
+    /**
+     * Menentukan jalur file output
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
+     */
+    saveComponents: false,
+
+    /**
+     * Prefiks kunci kamus
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Sisa konfigurasi Anda
+  compiler: {
+    /**
+     * Menunjukkan apakah compiler harus diaktifkan.
+     */
+    enabled: true,
+
+    /**
+     * Menentukan jalur file output
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
+     */
+    saveComponents: false,
+
+    /**
+     * Prefiks kunci kamus
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+module.exports = config;
+```
+
+<Tabs>
+ <Tab value='Perintah ekstrak'>
+
+Jalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+ </Tab>
+ <Tab value='Compiler Babel'>
+
+```bash packageManager="npm"
+npm install @intlayer/babel --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/babel --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/babel --save-dev
+```
+
+```bash packageManager="bun"
+bun add @intlayer/babel --dev
+```
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  getExtractPluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Ekstrak konten dari komponen ke dalam kamus
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+  ],
+};
+```
+
+```bash packageManager="npm"
+npm run build # Atau npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Or pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Or yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
+
 ### (Opsional) Langkah 11: Membuat Komponen Link yang Dilokalkan
 
 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`.

package/docs/id/intlayer_with_nextjs_compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-01-10
+updatedAt: 2026-03-12
 title: Next.js i18n - Ubah aplikasi Next.js yang sudah ada menjadi aplikasi multibahasa di 2026
 description: Temukan cara membuat aplikasi Next.js Anda yang sudah ada menjadi multibahasa menggunakan Intlayer Compiler. Ikuti panduan dokumentasi untuk melakukan internasionalisasi (i18n) dan menerjemahkan aplikasi Anda menggunakan AI.
 keywords:
@@ -501,6 +501,179 @@ Ekstensi ini menyediakan:
 
 Baca [dokumentasi Ekstensi VS Code Intlayer](https://intlayer.org/doc/vs-code-extension) untuk instruksi mendetail tentang penggunaan ekstensi.
 
+### (Opsional) Langkah 1 : Ekstrak konten komponen Anda
+
+Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
+
+Untuk memudahkan proses ini, Intlayer mengusulkan [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/extract.md) untuk mengubah komponen Anda dan mengekstrak kontennya.
+
+Untuk mengaturnya, Anda dapat menambahkan bagian `compiler` di file `intlayer.config.ts` Anda:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Sisa konfigurasi Anda
+  compiler: {
+    /**
+     * Menunjukkan apakah compiler harus diaktifkan.
+     */
+    enabled: true,
+
+    /**
+     * Menentukan jalur file output
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
+     */
+    saveComponents: false,
+
+    /**
+     * Prefiks kunci kamus
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Sisa konfigurasi Anda
+  compiler: {
+    /**
+     * Menunjukkan apakah compiler harus diaktifkan.
+     */
+    enabled: true,
+
+    /**
+     * Menentukan jalur file output
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
+     */
+    saveComponents: false,
+
+    /**
+     * Prefiks kunci kamus
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... Sisa konfigurasi Anda
+  compiler: {
+    /**
+     * Menunjukkan apakah compiler harus diaktifkan.
+     */
+    enabled: true,
+
+    /**
+     * Menentukan jalur file output
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
+     */
+    saveComponents: false,
+
+    /**
+     * Prefiks kunci kamus
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+module.exports = config;
+```
+
+<Tabs>
+ <Tab value='Perintah ekstrak'>
+
+Jalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+ </Tab>
+ <Tab value='Compiler Babel'>
+
+```bash packageManager="npm"
+npm install @intlayer/babel --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/babel --save-dev
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/babel --save-dev
+```
+
+```bash packageManager="bun"
+bun add @intlayer/babel --dev
+```
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  getExtractPluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Ekstrak konten dari komponen ke dalam kamus
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+  ],
+};
+```
+
+```bash packageManager="npm"
+npm run build # Atau npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Or pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Or yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
+
 ### 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 mengeksternalisasikan konten Anda menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).