@intlayer/docs 7.3.1 → 7.3.2-canary.1

package/docs/id/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Ekstraksi Konten Otomatis untuk i18n
+description: Otomatiskan proses internasionalisasi Anda dengan Intlayer Compiler. Ekstrak konten langsung dari komponen Anda untuk i18n yang lebih cepat dan efisien di Vite, Next.js, dan lainnya.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internasionalisasi
+  - i18n
+  - Otomatisasi
+  - Ekstraksi
+  - Kecepatan
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Rilis Compiler
+---
+
+# Intlayer Compiler | Ekstraksi Konten Otomatis untuk i18n
+
+## Apa itu Intlayer Compiler?
+
+**Intlayer Compiler** adalah alat yang kuat yang dirancang untuk mengotomatisasi proses internasionalisasi (i18n) dalam aplikasi Anda. Alat ini memindai kode sumber Anda (JSX, TSX, Vue, Svelte) untuk deklarasi konten, mengekstraknya, dan secara otomatis menghasilkan file kamus yang diperlukan. Ini memungkinkan Anda untuk menjaga konten tetap berdekatan dengan komponen Anda sementara Intlayer menangani manajemen dan sinkronisasi kamus Anda.
+
+## Mengapa Menggunakan Intlayer Compiler?
+
+- **Otomatisasi**: Menghilangkan penyalinan konten secara manual ke dalam kamus.
+- **Kecepatan**: Ekstraksi konten yang dioptimalkan memastikan proses build Anda tetap cepat.
+- **Pengalaman Pengembang**: Menjaga deklarasi konten tepat di tempat mereka digunakan, meningkatkan pemeliharaan.
+- **Pembaruan Langsung**: Mendukung Hot Module Replacement (HMR) untuk umpan balik instan selama pengembangan.
+
+Lihat posting blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/compiler_vs_declarative_i18n.md) untuk perbandingan yang lebih mendalam.
+
+## Mengapa Tidak Menggunakan Intlayer Compiler?
+
+Meskipun compiler menawarkan pengalaman "langsung bekerja" yang sangat baik, compiler juga memperkenalkan beberapa kompromi yang harus Anda ketahui:
+
+- **Ambiguitas heuristik**: Compiler harus menebak apa yang merupakan konten yang ditujukan untuk pengguna versus logika aplikasi (misalnya, `className="active"`, kode status, ID produk). Dalam codebase yang kompleks, ini dapat menyebabkan false positive atau string yang terlewat yang memerlukan anotasi manual dan pengecualian.
+- **Ekstraksi hanya statis**: Ekstraksi berbasis compiler bergantung pada analisis statis. String yang hanya ada saat runtime (kode kesalahan API, field CMS, dll.) tidak dapat ditemukan atau diterjemahkan oleh compiler saja, jadi Anda masih memerlukan strategi i18n runtime yang melengkapi.
+
+Untuk perbandingan arsitektur yang lebih mendalam, lihat posting blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/id/compiler_vs_declarative_i18n.md).
+
+Sebagai alternatif, untuk mengotomatisasi proses i18n Anda sambil mempertahankan kontrol penuh atas konten Anda, Intlayer juga menyediakan perintah auto-ekstraksi `intlayer transform` (lihat [dokumentasi CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/transform.md)), atau perintah `Intlayer: extract content to Dictionary` dari ekstensi Intlayer VS Code (lihat [dokumentasi ekstensi VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/vs_code_extension.md)).
+
+## Penggunaan
+
+### Vite
+
+Untuk aplikasi berbasis Vite (React, Vue, Svelte, dll.), cara termudah menggunakan compiler adalah melalui plugin `vite-intlayer`.
+
+#### Instalasi
+
+```bash
+npm install vite-intlayer
+```
+
+#### Konfigurasi
+
+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(), // Menambahkan plugin compiler
+  ],
+});
+```
+
+#### Dukungan Framework
+
+Plugin Vite secara otomatis mendeteksi dan menangani berbagai jenis file:
+
+- **React / JSX / TSX**: Ditangani secara native.
+- **Vue**: Memerlukan `@intlayer/vue-compiler`.
+- **Svelte**: Memerlukan `@intlayer/svelte-compiler`.
+
+Pastikan untuk menginstal paket compiler yang sesuai untuk framework Anda:
+
+```bash
+# Untuk Vue
+npm install @intlayer/vue-compiler
+
+# Untuk Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Untuk Next.js atau aplikasi berbasis Webpack lainnya yang menggunakan Babel, Anda dapat mengonfigurasi compiler menggunakan plugin `@intlayer/babel`.
+
+#### Instalasi
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Konfigurasi
+
+Perbarui `babel.config.js` Anda (atau `babel.config.json`) untuk menyertakan plugin ekstraksi. Kami menyediakan helper `getExtractPluginOptions` untuk memuat konfigurasi Intlayer Anda secara otomatis.
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Extract content from components into dictionaries
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+Konfigurasi ini memastikan bahwa konten yang dideklarasikan dalam komponen Anda secara otomatis diekstraksi dan digunakan untuk menghasilkan kamus selama proses build Anda.

package/docs/id/formatters.md

@@ -31,7 +31,6 @@ history:
   - version: 5.8.0
     date: 2025-08-20
     changes: Menambahkan dokumentasi list formatter
-  - version: 5.8.0
   - version: 5.8.0
     date: 2025-08-20
     changes: Menambahkan utilitas Intl tambahan (DisplayNames, Collator, PluralRules)

package/docs/id/intlayer_with_nextjs_14.md

@@ -17,7 +17,6 @@ slugs:
   - 14
 applicationTemplate: https://github.com/aymericzip/intlayer-next-14-template
 history:
-  - version: 7.0.6
   - version: 6.2.0
     date: 2025-10-09
     changes: Menambahkan dokumentasi untuk hook `useLocale` dengan opsi `onLocaleChange`
@@ -26,7 +25,7 @@ history:
     changes: Menambahkan dokumentasi untuk fungsi `getLocale` pada server actions
   - version: 5.6.2
     date: 2025-09-22
-  changes: Menambahkan dokumentasi untuk helper `multipleMiddlewares`
+    changes: Menambahkan dokumentasi untuk helper `multipleMiddlewares`
   - version: 5.6.0
     date: 2025-07-06
     changes: Mengubah fungsi `withIntlayer()` menjadi fungsi berbasis promise

package/docs/id/intlayer_with_nextjs_15.md

@@ -26,7 +26,7 @@ history:
     changes: Menambahkan penyebutan fungsi `withIntlayerSync()`
   - version: 6.2.0
     date: 2025-10-09
-  changes: Menambahkan dokumentasi untuk hook `useLocale` dengan opsi `onLocaleChange`
+    changes: Menambahkan dokumentasi untuk hook `useLocale` dengan opsi `onLocaleChange`
   - version: 5.6.6
     date: 2025-10-02
     changes: Menambahkan dokumentasi untuk fungsi `getLocale` pada server actions

package/docs/it/bundle_optimization.md

@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
 // Codice ottimizzato (Dinamico)
 const content = useDictionaryAsync({
   en: () =>
-    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
   fr: () =>
-    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
 });
 ```
 

package/docs/it/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Estrazione Automatica dei Contenuti per i18n
+description: Automatizza il tuo processo di internazionalizzazione con Intlayer Compiler. Estrai contenuti direttamente dai tuoi componenti per un i18n più veloce ed efficiente in Vite, Next.js e altro.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internazionalizzazione
+  - i18n
+  - Automazione
+  - Estrazione
+  - Velocità
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Rilascio Compiler
+---
+
+# Intlayer Compiler | Estrazione Automatica dei Contenuti per i18n
+
+## Cos'è Intlayer Compiler?
+
+Il **Intlayer Compiler** è uno strumento potente progettato per automatizzare il processo di internazionalizzazione (i18n) nelle tue applicazioni. Scansiona il tuo codice sorgente (JSX, TSX, Vue, Svelte) alla ricerca di dichiarazioni di contenuto, le estrae e genera automaticamente i file di dizionario necessari. Questo ti permette di mantenere i contenuti co-localizzati con i tuoi componenti mentre Intlayer gestisce la sincronizzazione e la gestione dei dizionari.
+
+## Perché Usare Intlayer Compiler?
+
+- **Automazione**: Elimina il copia-incolla manuale dei contenuti nei dizionari.
+- **Velocità**: Estrazione dei contenuti ottimizzata per garantire che il processo di build rimanga veloce.
+- **Esperienza Sviluppatore**: Mantieni le dichiarazioni di contenuto esattamente dove vengono utilizzate, migliorando la manutenibilità.
+- **Aggiornamenti in tempo reale**: Supporta Hot Module Replacement (HMR) per un feedback immediato durante lo sviluppo.
+
+Consulta il post sul blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/compiler_vs_declarative_i18n.md) per un confronto più approfondito.
+
+## Perché non usare Intlayer Compiler?
+
+Sebbene il compiler offra un'esperienza eccellente "funziona subito", introduce anche alcuni compromessi di cui dovresti essere consapevole:
+
+- **Ambiguità euristica**: Il compiler deve indovinare cosa è contenuto orientato all'utente rispetto alla logica dell'applicazione (ad esempio, `className="active"`, codici di stato, ID prodotto). In codebase complesse, questo può portare a falsi positivi o stringhe mancate che richiedono annotazioni manuali ed eccezioni.
+- **Estrazione solo statica**: L'estrazione basata sul compiler si basa sull'analisi statica. Le stringhe che esistono solo in fase di esecuzione (codici di errore API, campi CMS, ecc.) non possono essere scoperte o tradotte dal compiler da solo, quindi hai ancora bisogno di una strategia i18n di runtime complementare.
+
+Per un confronto architetturale più approfondito, consulta il post sul blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/compiler_vs_declarative_i18n.md).
+
+Come alternativa, per automatizzare il tuo processo i18n mantenendo il pieno controllo del tuo contenuto, Intlayer fornisce anche un comando di auto-estrazione `intlayer transform` (vedi [documentazione CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/transform.md)), o il comando `Intlayer: extract content to Dictionary` dall'estensione Intlayer VS Code (vedi [documentazione estensione VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/vs_code_extension.md)).
+
+## Utilizzo
+
+### Vite
+
+Per le applicazioni basate su Vite (React, Vue, Svelte, ecc.), il modo più semplice per utilizzare il compiler è tramite il plugin `vite-intlayer`.
+
+#### Installazione
+
+```bash
+npm install vite-intlayer
+```
+
+#### Configurazione
+
+Aggiorna il tuo `vite.config.ts` per includere il plugin `intlayerCompiler`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Aggiunge il plugin del compiler
+  ],
+});
+```
+
+#### Supporto per Framework
+
+Il plugin Vite rileva e gestisce automaticamente diversi tipi di file:
+
+- **React / JSX / TSX**: Gestito nativamente.
+- **Vue**: Richiede `@intlayer/vue-compiler`.
+- **Svelte**: Richiede `@intlayer/svelte-compiler`.
+
+Assicurati di installare il pacchetto compiler appropriato per il tuo framework:
+
+```bash
+# Per Vue
+npm install @intlayer/vue-compiler
+
+# Per Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Per Next.js o altre applicazioni basate su Webpack che utilizzano Babel, puoi configurare il compiler usando il plugin `@intlayer/babel`.
+
+#### Installazione
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Configurazione
+
+Aggiorna il tuo `babel.config.js` (o `babel.config.json`) per includere il plugin di estrazione. Forniamo un helper `getExtractPluginOptions` per caricare automaticamente la tua configurazione Intlayer.
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Extract content from components into dictionaries
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+Questa configurazione garantisce che il contenuto dichiarato nei tuoi componenti venga estratto automaticamente e utilizzato per generare i dizionari durante il processo di build.

package/docs/ja/bundle_optimization.md

@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
 // 最適化されたコード（動的）
 const content = useDictionaryAsync({
   en: () =>
-    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
   fr: () =>
-    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
 });
 ```
 

package/docs/ja/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer コンパイラー | i18n のための自動コンテンツ抽出
+description: Intlayer コンパイラーで国際化プロセスを自動化しましょう。コンポーネントから直接コンテンツを抽出し、Vite、Next.js などでより高速かつ効率的な i18n を実現します。
+keywords:
+  - Intlayer
+  - コンパイラー
+  - 国際化
+  - i18n
+  - 自動化
+  - 抽出
+  - 速度
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: コンパイラーリリース
+---
+
+# Intlayer コンパイラー | i18n のための自動コンテンツ抽出
+
+## Intlayer コンパイラーとは？
+
+**Intlayer コンパイラー**は、アプリケーションの国際化（i18n）プロセスを自動化するために設計された強力なツールです。ソースコード（JSX、TSX、Vue、Svelte）内のコンテンツ宣言をスキャンし、それらを抽出して必要な辞書ファイルを自動的に生成します。これにより、コンテンツをコンポーネントと共に配置したままにでき、Intlayer が辞書の管理と同期を担当します。
+
+## なぜ Intlayer コンパイラーを使うのか？
+
+- **自動化**: コンテンツを辞書に手動でコピー＆ペーストする手間を排除します。
+- **高速化**: 最適化されたコンテンツ抽出により、ビルドプロセスの高速化を実現します。
+- **開発者体験**: コンテンツ宣言を使用箇所にそのまま保持し、保守性を向上させます。
+- **ライブアップデート**: 開発中に即時フィードバックを得られるホットモジュールリプレースメント（HMR）をサポートします。
+
+より詳しい比較については、[Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/compiler_vs_declarative_i18n.md) のブログ記事をご覧ください。
+
+## Intlayer コンパイラーを使わない理由
+
+コンパイラーは優れた「そのまま動作する」体験を提供しますが、いくつかのトレードオフも導入します：
+
+- **ヒューリスティックの曖昧さ**：コンパイラーは、ユーザー向けコンテンツとアプリケーションロジック（例：`className="active"`、ステータスコード、製品ID）を推測する必要があります。複雑なコードベースでは、これにより誤検出や見逃された文字列が発生し、手動での注釈と例外処理が必要になる場合があります。
+- **静的抽出のみ**：コンパイラーベースの抽出は静的解析に依存しています。実行時のみ存在する文字列（APIエラーコード、CMSフィールドなど）は、コンパイラー単独では発見または翻訳できないため、補完的なランタイムi18n戦略が必要です。
+
+より深いアーキテクチャの比較については、ブログ記事[Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/compiler_vs_declarative_i18n.md)を参照してください。
+
+代替として、コンテンツの完全な制御を維持しながらi18nプロセスを自動化するために、Intlayerは自動抽出コマンド `intlayer transform`（[CLIドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/transform.md)を参照）またはIntlayer VS Code拡張機能の `Intlayer: extract content to Dictionary` コマンド（[VS Code拡張機能ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/vs_code_extension.md)を参照）も提供しています。
+
+## 使い方
+
+### Vite
+
+Viteベースのアプリケーション（React、Vue、Svelteなど）では、`vite-intlayer` プラグインを使うのが最も簡単な方法です。
+
+#### インストール
+
+```bash
+npm install vite-intlayer
+```
+
+#### 設定
+
+`vite.config.ts` を更新して `intlayerCompiler` プラグインを含めます：
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // コンパイラプラグインを追加
+  ],
+});
+```
+
+#### フレームワークサポート
+
+Viteプラグインは自動的に異なるファイルタイプを検出し処理します：
+
+- **React / JSX / TSX**: ネイティブに対応。
+- **Vue**: `@intlayer/vue-compiler` が必要です。
+- **Svelte**: `@intlayer/svelte-compiler` が必要です。
+
+使用しているフレームワークに応じて、適切なコンパイラパッケージをインストールしてください：
+
+```bash
+# Vue用
+npm install @intlayer/vue-compiler
+
+# Svelte用
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Next.jsやその他のWebpackベースのBabelを使用するアプリケーションでは、`@intlayer/babel`プラグインを使ってコンパイラを設定できます。
+
+#### インストール
+
+```bash
+npm install @intlayer/babel
+```
+
+#### 設定
+
+`babel.config.js`（または `babel.config.json`）を更新して、抽出プラグインを含めます。Intlayerの設定を自動的に読み込むためのヘルパー `getExtractPluginOptions` を提供しています。
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Extract content from components into dictionaries
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+この設定により、コンポーネント内で宣言されたコンテンツが自動的に抽出され、ビルドプロセス中に辞書の生成に使用されます。

package/docs/ko/bundle_optimization.md

@@ -153,9 +153,13 @@ const content = useIntlayer("my-key");
 // Optimized code (Dynamic)
 const content = useDictionaryAsync({
   en: () =>
-    import(".intlayer/dynamic_dictionary/en.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
   fr: () =>
-    import(".intlayer/dynamic_dictionary/fr.json").then((mod) => mod.default),
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
 });
 ```
 

package/docs/ko/cli/index.md

@@ -30,26 +30,26 @@ history:
     date: 2025-10-05
     changes: 명령어에 build 옵션 추가
   - version: 6.1.2
-  date: 2025-09-26
-  changes: version 명령어 추가
-- version: 6.1.0
-  date: 2025-09-26
-  changes: CLI를 사용하여 verbose 옵션의 기본값을 true로 설정
-- version: 6.1.0
-  date: 2025-09-23
-  changes: watch 명령어 및 with 옵션 추가
-- version: 6.0.1
-  date: 2025-09-23
-  changes: editor 명령어 추가
-- version: 6.0.0
-  date: 2025-09-17
-  changes: content test 및 list 명령어 추가
-- version: 5.5.11
-  date: 2025-07-11
-  changes: CLI 명령어 매개변수 문서 업데이트
-- version: 5.5.10
-  date: 2025-06-29
-  changes: 히스토리 초기화
+    date: 2025-09-26
+    changes: version 명령어 추가
+  - version: 6.1.0
+    date: 2025-09-26
+    changes: CLI를 사용하여 verbose 옵션의 기본값을 true로 설정
+  - version: 6.1.0
+    date: 2025-09-23
+    changes: watch 명령어 및 with 옵션 추가
+  - version: 6.0.1
+    date: 2025-09-23
+    changes: editor 명령어 추가
+  - version: 6.0.0
+    date: 2025-09-17
+    changes: content test 및 list 명령어 추가
+  - version: 5.5.11
+    date: 2025-07-11
+    changes: CLI 명령어 매개변수 문서 업데이트
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: 히스토리 초기화
 ---
 
 # Intlayer CLI

package/docs/ko/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer 컴파일러 | i18n을 위한 자동화된 콘텐츠 추출
+description: Intlayer 컴파일러로 국제화 프로세스를 자동화하세요. Vite, Next.js 등에서 더 빠르고 효율적인 i18n을 위해 컴포넌트에서 직접 콘텐츠를 추출합니다.
+keywords:
+  - Intlayer
+  - 컴파일러
+  - 국제화
+  - i18n
+  - 자동화
+  - 추출
+  - 속도
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: 컴파일러 출시
+---
+
+# Intlayer 컴파일러 | i18n을 위한 자동화된 콘텐츠 추출
+
+## Intlayer 컴파일러란?
+
+**Intlayer 컴파일러**는 애플리케이션의 국제화(i18n) 프로세스를 자동화하도록 설계된 강력한 도구입니다. 소스 코드(JSX, TSX, Vue, Svelte)에서 콘텐츠 선언을 스캔하고 추출하여 필요한 사전(dictionary) 파일을 자동으로 생성합니다. 이를 통해 콘텐츠를 컴포넌트와 함께 위치시킬 수 있으며, Intlayer가 사전의 관리 및 동기화를 처리합니다.
+
+## Intlayer 컴파일러를 사용하는 이유
+
+- **자동화**: 콘텐츠를 사전에 수동으로 복사하여 붙여넣는 작업을 제거합니다.
+- **속도**: 빌드 프로세스가 빠르게 유지되도록 최적화된 콘텐츠 추출을 제공합니다.
+- **개발자 경험**: 콘텐츠 선언을 사용되는 위치에 그대로 유지하여 유지보수성을 향상시킵니다.
+- **실시간 업데이트**: 개발 중 즉각적인 피드백을 위한 Hot Module Replacement(HMR)를 지원합니다.
+
+더 깊은 비교를 원한다면 [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ko/compiler_vs_declarative_i18n.md) 블로그 게시물을 참조하세요.
+
+## Intlayer 컴파일러를 사용하지 않는 이유
+
+컴파일러는 훌륭한 "바로 작동" 경험을 제공하지만, 인지해야 할 몇 가지 트레이드오프도 도입합니다:
+
+- **휴리스틱 모호성**: 컴파일러는 사용자 지향 콘텐츠와 애플리케이션 로직(예: `className="active"`, 상태 코드, 제품 ID)을 추측해야 합니다. 복잡한 코드베이스에서는 이것이 오탐지 또는 누락된 문자열로 이어질 수 있으며, 수동 주석 및 예외 처리가 필요합니다.
+- **정적 추출만**: 컴파일러 기반 추출은 정적 분석에 의존합니다. 런타임에만 존재하는 문자열(API 오류 코드, CMS 필드 등)은 컴파일러만으로는 발견하거나 번역할 수 없으므로 여전히 보완적인 런타임 i18n 전략이 필요합니다.
+
+더 깊은 아키텍처 비교를 위해서는 블로그 게시물 [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ko/compiler_vs_declarative_i18n.md)을 참조하세요.
+
+대안으로, 콘텐츠에 대한 완전한 제어를 유지하면서 i18n 프로세스를 자동화하기 위해 Intlayer는 자동 추출 명령 `intlayer transform`([CLI 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/transform.md) 참조) 또는 Intlayer VS Code 확장의 `Intlayer: extract content to Dictionary` 명령([VS Code 확장 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/vs_code_extension.md) 참조)도 제공합니다.
+
+## 사용법
+
+### Vite
+
+Vite 기반 애플리케이션(React, Vue, Svelte 등)의 경우, 컴파일러를 사용하는 가장 쉬운 방법은 `vite-intlayer` 플러그인을 사용하는 것입니다.
+
+#### 설치
+
+```bash
+npm install vite-intlayer
+```
+
+#### 구성
+
+`vite.config.ts` 파일을 업데이트하여 `intlayerCompiler` 플러그인을 포함하세요:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // 컴파일러 플러그인 추가
+  ],
+});
+```
+
+#### 프레임워크 지원
+
+Vite 플러그인은 다양한 파일 유형을 자동으로 감지하고 처리합니다:
+
+- **React / JSX / TSX**: 기본적으로 처리됩니다.
+- **Vue**: `@intlayer/vue-compiler`가 필요합니다.
+- **Svelte**: `@intlayer/svelte-compiler`가 필요합니다.
+
+사용하는 프레임워크에 맞는 컴파일러 패키지를 반드시 설치하세요:
+
+```bash
+# Vue용
+npm install @intlayer/vue-compiler
+
+# Svelte용
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Next.js 또는 Babel을 사용하는 다른 Webpack 기반 애플리케이션의 경우, `@intlayer/babel` 플러그인을 사용하여 컴파일러를 구성할 수 있습니다.
+
+#### 설치
+
+```bash
+npm install @intlayer/babel
+```
+
+#### 구성
+
+`babel.config.js`(또는 `babel.config.json`) 파일을 업데이트하여 추출 플러그인을 포함하세요. Intlayer 구성을 자동으로 로드하는 헬퍼 함수 `getExtractPluginOptions`를 제공합니다.
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Extract content from components into dictionaries
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+이 구성은 컴포넌트 내에 선언된 콘텐츠가 자동으로 추출되어 빌드 과정 중에 사전 생성에 사용되도록 보장합니다.