@intlayer/docs 8.3.0-canary.4 → 8.3.1

package/docs/ko/compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-03-10
+updatedAt: 2026-03-12
 title: Intlayer 컴파일러 | i18n을 위한 자동화된 콘텐츠 추출
 description: Intlayer 컴파일러로 국제화 프로세스를 자동화하세요. Vite, Next.js 등에서 더 빠르고 효율적인 i18n을 위해 컴포넌트에서 직접 콘텐츠를 추출합니다.
 keywords:
@@ -21,8 +21,8 @@ slugs:
   - compiler
 history:
   - version: 8.2.0
-    date: 2026-03-10
-    changes: Update compiler options, add FilePathPattern support
+    date: 2026-03-09
+    changes: 컴파일러 옵션 업데이트, FilePathPattern 지원 추가
   - version: 8.1.7
     date: 2026-02-25
     changes: 컴파일러 옵션 업데이트
@@ -136,9 +136,9 @@ const {
 module.exports = {
   presets: ["next/babel"],
   plugins: [
-    // Extract content from components into dictionaries
+    // 컴포넌트에서 콘텐츠를 추출하여 사전으로 변환
     [intlayerExtractBabelPlugin, getExtractPluginOptions()],
-    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    // useIntlayer를 직접 사전 임포트로 대체하여 임포트 최적화
     [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
   ],
 };
@@ -149,73 +149,85 @@ module.exports = {
 See complete tutorial: [Intlayer Compiler with Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_compiler.md)
 
  </Tab>
+</Tabs>
 
 ### 사용자 정의 구성
 
 컴파일러 동작을 사용자 정의하려면 프로젝트 루트에 있는 `intlayer.config.ts` 파일을 업데이트할 수 있습니다.
 
-```ts fileName="intlayer.config.ts"
+````ts fileName="intlayer.config.ts"
 import { type IntlayerConfig, Locales } from "intlayer";
 
 const config: IntlayerConfig = {
   compiler: {
     /**
+     * 컴파일러 활성화 여부를 나타냅니다.
      * 개발 중에 컴파일러를 건너뛰고 시작 시간을 단축하려면 'build-only'로 설정하십시오.
      */
     enabled: true,
 
     /**
-     * Pattern to traverse the code to optimize.
+     * 출력 파일 경로를 정의합니다. `outputDir`을 대체합니다.
+     *
+     * - `./` 경로는 컴포넌트 디렉터리를 기준으로 해결됩니다.
+     * - `/` 경로는 프로젝트 루트(`baseDir`)를 기준으로 해결됩니다.
+     *
+     * - 경로에 `{{locale}}` 변수를 넣으면 언어별로 분리된 사전 생성이 활성화됩니다.
+     *
+     * 예시:
+     * ```ts
+     * {
+     *   // 컴포넌트 옆에 다국어 .content.ts 파일 생성
+     *   output: ({ fileName, extension }) => `./${fileName}${extension}`,
+     *
+     *   // output: './{{fileName}}{{extension}}', // 문자열 템플릿을 사용한 동일한 표현
+     * }
+     * ```
+     *
+     * ```ts
+     * {
+     *   // 프로젝트 루트의 언어별 중앙 집중식 JSON 파일 생성
+     *   output: ({ key, locale }) => `/locales/${locale}/${key}.content.json`,
+     *
+     *   // output: '/locales/{{locale}}/{{key}}.content.json', // 문자열 템플릿을 사용한 동일한 표현
+     * }
+     * ```
+     *
+     * 변수 목록:
+     *   - `fileName`: 파일 이름.
+     *   - `key`: 콘텐츠 키.
+     *   - `locale`: 콘텐츠 로케일.
+     *   - `extension`: 파일 확장자.
+     *   - `componentFileName`: 컴포넌트 파일 이름.
+     *   - `componentExtension`: 컴포넌트 파일 확장자.
+     *   - `format`: 사전 형식.
+     *   - `componentFormat`: 컴포넌트 사전 형식.
+     *   - `componentDirPath`: 컴포넌트 디렉터리 경로.
      */
-    transformPattern: [
-      "**/*.{js,ts,mjs,cjs,jsx,tsx,vue,svelte}",
-      "!**/node_modules/**",
-    ],
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
     /**
-     * Pattern to exclude from the optimization.
-     */
-    excludePattern: ["**/node_modules/**"],
-
-    /**
-     * 최적화된 사전의 출력 디렉터리.
+     * 변환된 후 컴포넌트를 저장할지 여부를 나타냅니다.
+     * 이렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
      */
-    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
+    saveComponents: false,
 
     /**
-     * 키 없이 생성된 파일에 콘텐츠만 삽입합니다.
+     * 생성된 파일에 콘텐츠만 삽입합니다. 로케일당 i18next 또는 ICU MessageFormat JSON 출력에 유용합니다.
+     *
+     * - `output: ({ locale, key }) => `./locale/${locale}/${key}.json`,`
      */
     noMetadata: false,
 
     /**
      * 사전 키 접두사
      */
-    dictionaryKeyPrefix: "", // Remove base prefix
-
-    /**
-     * 변환된 후 구성 요소를 저장할지 여부를 나타냅니다.
-     * 이렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
-     */
-    saveComponents: false,
+    dictionaryKeyPrefix: "", // 추출된 사전 키에 선택적 접두사 추가
   },
 };
 
 export default config;
-```
-
-### 누락된 번역 채우기
-
-Intlayer는 누락된 번역을 채우는 데 도움이 되는 CLI 도구를 제공합니다. `intlayer` 명령을 사용하여 코드에서 누락된 번역을 테스트하고 채울 수 있습니다.
-
-```bash
-npx intlayer test         # 누락된 번역이 있는지 테스트
-```
-
-```bash
-npx intlayer fill         # 누락된 번역 채우기
-```
-
-> 자세한 내용은 [CLI 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/ci.md)를 참조하세요.
+````
 
 ### 컴파일러 구성 참조
 
@@ -225,36 +237,37 @@ npx intlayer fill         # 누락된 번역 채우기
   - _형식_: `boolean | 'build-only'`
   - _기본값_: `true`
   - _설명_: 컴파일러 활성화 여부를 나타냅니다.
+
 - **dictionaryKeyPrefix**:
   - _형식_: `string`
-  - _기본값_: `'comp-'`
+  - _기본값_: `''`
   - _설명_: 추출된 사전 키의 접두사.
+
 - **transformPattern**:
   - _형식_: `string | string[]`
   - _기본값_: `['**/*.{js,ts,mjs,cjs,jsx,tsx,vue,svelte}', '!**/node_modules/**']`
-  - _설명_: 최적화할 코드를 탐색하는 패턴.
+  - _설명_: (사용 중단됨: 대신 `build.traversePattern`을 사용하세요) 최적화할 코드를 탐색하는 패턴.
+
 - **excludePattern**:
   - _형식_: `string | string[]`
   - _기본값_: `['**/node_modules/**']`
-  - _설명_: 최적화에서 제외할 패턴.
-- **outputDir** (Deprecated):
-  - _형식_: `string`
-  - _기본값_: `'compiler'`
-  - _설명_: 추출된 사전이 저장될 디렉터리.
+  - _설명_: (사용 중단됨: 대신 `build.traversePattern`을 사용하세요) 최적화에서 제외할 패턴.
 
 - **output**:
   - _형식_: `FilePathPattern`
   - _기본값_: `({ key }) => 'compiler/${key}.content.json'`
   - _설명_: 출력 파일 경로를 정의합니다. `outputDir`을 대체합니다. `{{locale}}`, `{{key}}`, `{{fileName}}`, `{{extension}}`, `{{format}}`, `{{dirPath}}`, `{{componentFileName}}`, `{{componentExtension}}`, `{{componentFormat}}`와 같은 동적 변수를 처리합니다. `'my/{{var}}/path'` 형식을 사용하여 문자열로 설정하거나 함수로 설정할 수 있습니다.
-  - _참고_: `./**/*` 경로는 구성 요소를 기준으로 해결됩니다. `/**/*` 경로는 Intlayer `baseDir`을 기준으로 해결됩니다.
+  - _참고_: `./**/*` 경로는 컴포넌트를 기준으로 해결됩니다. `/**/*` 경로는 Intlayer `baseDir`을 기준으로 해결됩니다.
+  - _참고_: 로케일이 경로에 정의된 경우 사전은 로케일별로 생성됩니다.
   - _예시_: `output: ({ locale, key }) => 'compiler/${locale}/${key}.json'`
 
 - **noMetadata**:
   - _형식_: `boolean`
   - _기본값_: `false`
-  - _설명_: 메타데이터를 파일에 저장할지 여부를 나타냅니다. true인 경우 컴파일러는 사전의 메타데이터(키, 콘텐츠 래퍼)를 저장하지 않습니다.
+  - _설명_: 메타데이터를 파일에 저장할지 여부를 나타냅니다. true인 경우 컴파일러는 사전의 메타데이터(키, 콘텐츠 래퍼)를 저장하지 않습니다. 로케일별 i18next 또는 ICU MessageFormat JSON 출력에 유용합니다.
   - _참고_: `loadJSON` 플러그인과 함께 사용할 때 유용합니다.
-  - _예시_: `true`인 경우:
+  - _예시_:
+    `true`인 경우:
     ```json
     {
       "key": "value"
@@ -273,4 +286,27 @@ npx intlayer fill         # 누락된 번역 채우기
 - **saveComponents**:
   - _형식_: `boolean`
   - _기본값_: `false`
-  - _설명_: 변환된 후 구성 요소를 저장할지 여부를 나타냅니다.
+  - _설명_: 변환된 후 컴포넌트를 저장할지 여부를 나타냅니다.
+
+### 누락된 번역 채우기
+
+Intlayer는 누락된 번역을 채우는 데 도움이 되는 CLI 도구를 제공합니다. `intlayer` 명령을 사용하여 코드에서 누락된 번역을 테스트하고 채울 수 있습니다.
+
+```bash
+npx intlayer test         # 누락된 번역이 있는지 테스트
+```
+
+```bash
+npx intlayer fill         # 누락된 번역 채우기
+```
+
+### 추출
+
+Intlayer는 코드에서 콘텐츠를 추출하는 데 도움이 되는 CLI 도구를 제공합니다. `intlayer extract` 명령을 사용하여 코드에서 콘텐츠를 추출할 수 있습니다.
+
+```bash
+npx intlayer extract
+```
+
+> 자세한 내용은 [CLI 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/index.md)
+> 를 참조하세요.

package/docs/ko/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-03-11
+updatedAt: 2026-03-12
 title: 구성
 description: 애플리케이션에 맞게 Intlayer를 구성하는 방법을 배우세요. Intlayer를 사용자 요구에 맞게 맞춤 설정할 수 있는 다양한 설정과 옵션을 이해하세요.
 keywords:
@@ -15,8 +15,8 @@ slugs:
   - configuration
 history:
   - version: 8.3.0
-    data: 2026-03-11
-    changes: 'baseDir'을 'content' 구성에서 'system' 구성으로 이동
+    date: 2026-03-11
+    changes: "'baseDir'을 'content' 구성에서 'system' 구성으로 이동"
   - version: 8.2.0
     date: 2026-03-10
     changes: 컴파일러 옵션 업데이트, 'output' 및 'noMetadata' 지원 추가
@@ -43,25 +43,25 @@ history:
     changes: JSON5 및 JSONC 파일 형식 지원 추가
   - version: 7.5.0
     date: 2025-12-17
-    changes: `buildMode` 옵션 추가
+    changes: "`buildMode` 옵션 추가"
   - version: 6.0.0
     date: 2025-09-16
-    changes: `live` 가져오기 모드 추가
+    changes: "`live` 가져오기 모드 추가"
   - version: 6.0.0
     date: 2025-09-16
-    changes: `live` import 모드 추가
+    changes: "`live` import 모드 추가"
   - version: 6.0.0
     date: 2025-09-04
-    changes: `hotReload` 필드를 `liveSync`로 교체하고 `liveSyncPort` 및 `liveSyncURL` 필드 추가
+    changes: "`hotReload` 필드를 `liveSync`로 교체하고 `liveSyncPort` 및 `liveSyncURL` 필드 추가"
   - version: 5.6.1
     date: 2025-07-25
-    changes: `activateDynamicImport`을 `importMode` 옵션으로 교체
+    changes: "`activateDynamicImport`을 `importMode` 옵션으로 교체"
   - version: 5.6.0
     date: 2025-07-13
     changes: 기본 contentDir를 `['src']`에서 `['.']`로 변경
   - version: 5.5.11
     date: 2025-06-29
-    changes: `docs` 명령어 추가
+    changes: "`docs` 명령어 추가"
 ---
 
 # Intlayer 구성 문서
@@ -95,7 +95,7 @@ Intlayer는 JSON, JS, MJS, TS 구성 파일 형식을 지원합니다:
 
 ## 예제 구성 파일
 
-```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";
@@ -193,7 +193,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.
@@ -330,6 +330,17 @@ const config: IntlayerConfig = {
      * Base URL for the AI API.
      */
     baseURL: "http://localhost:3000",
+
+    /**
+     * 데이터 직렬화
+     *
+     * 옵션:
+     * - "json": 표준, 신뢰할 수 있음; 더 많은 토큰을 사용합니다.
+     * - "toon": 토큰을 덜 사용하지만 JSON만큼 일관성이 있지는 않습니다.
+     *
+     * 기본값: "json"
+     */
+    dataSerialization: "json",
   },
 
   /**
@@ -429,42 +440,70 @@ const config: IntlayerConfig = {
   compiler: {
     /**
      * 컴파일러 활성화 여부를 나타냅니다.
+     *
+     * - false : 컴파일러를 비활성화합니다.
+     * - true : 컴파일러를 활성화합니다.
+     * - "build-only" : 개발 중에 컴파일러를 건너뛰고 시작 시간을 단축합니다.
+     *
+     * 기본값 : false
      */
     enabled: true,
 
     /**
-     * Pattern to traverse the code to optimize.
-     */
-    transformPattern: [
-      "**/*.{js,ts,mjs,cjs,jsx,tsx,vue,svelte}",
-      "!**/node_modules/**",
-    ],
-
-    /**
-     * Pattern to exclude from the optimization.
+     * 출력 파일 경로를 정의합니다. `outputDir`을 대체합니다.
+     *
+     * - `./` 경로는 컴포넌트 디렉터리를 기준으로 해결됩니다.
+     * - `/` 경로는 프로젝트 루트(`baseDir`)를 기준으로 해결됩니다.
+     *
+     * - 경로에 `{{locale}}` 변수를 넣으면 언어별로 분리된 사전 생성이 활성화됩니다.
+     *
+     * 예시:
+     * ```ts
+     * {
+     *   // 컴포넌트 옆에 다국어 .content.ts 파일 생성
+     *   output: ({ fileName, extension }) => `./${fileName}${extension}`,
+     *
+     *   // output: './{{fileName}}{{extension}}', // 문자열 템플릿을 사용한 동일한 표현
+     * }
+     * ```
+     *
+     * ```ts
+     * {
+     *   // 프로젝트 루트의 언어별 중앙 집중식 JSON 파일 생성
+     *   output: ({ key, locale }) => `/locales/${locale}/${key}.content.json`,
+     *
+     *   // output: '/locales/{{locale}}/{{key}}.content.json', // 문자열 템플릿을 사용한 동일한 표현
+     * }
+     * ```
+     *
+     * 변수 목록:
+     *   - `fileName`: 파일 이름.
+     *   - `key`: 콘텐츠 키.
+     *   - `locale`: 콘텐츠 로케일.
+     *   - `extension`: 파일 확장자.
+     *   - `componentFileName`: 컴포넌트 파일 이름.
+     *   - `componentExtension`: 컴포넌트 파일 확장자.
+     *   - `format`: 사전 형식.
+     *   - `componentFormat`: 컴포넌트 사전 형식.
+     *   - `componentDirPath`: 컴포넌트 디렉터리 경로.
      */
-    excludePattern: ["**/node_modules/**"],
+    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
 
     /**
-     * 최적화된 사전의 출력 디렉터리.
+     * 변환된 후 구성 요소를 저장할지 여부를 나타냅니다.
+     * 이렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
      */
-    output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
+    saveComponents: false,
 
     /**
-     * 키 없이 생성된 파일에 콘텐츠만 삽입합니다.
+     * 생성된 파일에 콘텐츠만 삽입합니다. 로케일별 i18next 또는 ICU MessageFormat JSON 출력에 유용합니다.
      */
     noMetadata: false,
 
     /**
      * 사전 키 접두사
      */
-    dictionaryKeyPrefix: "", // Remove base prefix
-
-    /**
-     * 변환된 후 구성 요소를 저장할지 여부를 나타냅니다.
-     * 이렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
-     */
-    saveComponents: false,
+    dictionaryKeyPrefix: "", // 추출된 사전 키에 선택적 접두사 추가
   },
 
   /**
@@ -483,7 +522,7 @@ const config: IntlayerConfig = {
 };
 
 export default config;
-```
+````
 
 ## 구성 참조
 
@@ -1039,7 +1078,7 @@ Intlayer가 애플리케이션의 국제화를 최적화하고 빌드하는 방
 
 - **dictionaryKeyPrefix**:
   - _타입_: `string`
-  - _기본값_: `'comp-'`
+  - _기본값_: `''`
   - _설명_: 추출된 사전 키의 접두사입니다.
   - _예시_: `'my-key-'`
   - _참고_: 사전을 추출할 때 파일 이름을 기반으로 키가 생성됩니다. 충돌을 방지하기 위해 생성된 키에 이 접두사가 추가됩니다.
@@ -1063,24 +1102,28 @@ Intlayer가 애플리케이션의 국제화를 최적화하고 빌드하는 방
   - _설명_: 최적화 중에 제외할 파일을 정의하는 패턴입니다.
   - _예시_: `['**/node_modules/**', '!**/node_modules/react/**']`
 
-- **outputDir**:
-  - _타입_: `string`
-  - _기본값_: `'compiler'`
-  - _설명_: 추출된 사전이 저장될 디렉토리로, 프로젝트 베이스 경로에 대한 상대 경로입니다.
-
 - **output**:
   - _형식_: `FilePathPattern`
-  - _기본값_: `({ key }) => 'compiler/${key}.content.json'`
-  - _설명_: 출력 파일 경로를 정의합니다. `outputDir`을 대체합니다. `{{locale}}`, `{{key}}`, `{{fileName}}`, `{{extension}}`, `{{format}}`, `{{dirPath}}`, `{{componentFileName}}`, `{{componentExtension}}`, `{{componentFormat}}`와 같은 동적 변수를 처리합니다. `'my/{{var}}/path'` 형식을 사용하여 문자열로 설정하거나 함수로 설정할 수 있습니다.
-  - _참고_: `./**/*` 경로는 구성 요소를 기준으로 해결됩니다. `/**/*` 경로는 Intlayer `baseDir`을 기준으로 해결됩니다.
-  - _예시_: `output: ({ locale, key }) => 'compiler/${locale}/${key}.json'`
+  - _기본값_: `undefined`
+  - _설명_: 출력 파일 경로를 정의합니다. `outputDir`을 대체합니다. 문자열 템플릿 또는 함수를 통해 동적 변수를 지원합니다. 지원되는 변수: `{{fileName}}`, `{{key}}`, `{{locale}}`, `{{extension}}`, `{{componentFileName}}`, `{{componentExtension}}`, `{{format}}`, `{{componentFormat}}`, `{{componentDirPath}}`.
+  - _참고_: `./` 경로는 구성 요소를 기준으로 해결됩니다. `/` 경로는 프로젝트 루트(`baseDir`)를 기준으로 해결됩니다.
+  - _참고_: 경로에 `{{locale}}` 변수를 포함하면 로케일별로 분리된 사전 생성이 활성화됩니다.
+  - _예시_:
+    - **구성 요소 옆에 다국어 파일 생성**:
+    - 문자열: `'./{{fileName}}{{extension}}'`
+    - 함수: `({ fileName, extension }) => \`./${fileName}${extension}\``
+
+    - **로케일별 중앙 집중식 JSON 출력**:
+    - 문자열: `'/locales/{{locale}}/{{key}}.content.json'`
+    - 함수: `({ key, locale }) => \`/locales/${locale}/${key}.content.json\``
 
 - **noMetadata**:
   - _형식_: `boolean`
   - _기본값_: `false`
-  - _설명_: 메타데이터를 파일에 저장할지 여부를 나타냅니다. true인 경우 컴파일러는 사전의 메타데이터(키, 콘텐츠 래퍼)를 저장하지 않습니다.
+  - _설명_: 메타데이터를 파일에 저장할지 여부를 나타냅니다. true인 경우 컴파일러는 사전의 메타데이터(키, 콘텐츠 래퍼)를 저장하지 않습니다. 로케일별 i18next 또는 ICU MessageFormat JSON 출력에 유용합니다.
   - _참고_: `loadJSON` 플러그인과 함께 사용할 때 유용합니다.
-  - _예시_: `true`인 경우:
+  - _예시_:
+    `true`인 경우:
     ```json
     {
       "key": "value"

package/docs/ko/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 - Next.js 16 앱 번역 방법 2026
 description: Next.js 16 웹사이트를 다국어로 만드는 방법을 알아보세요. 국제화(i18n) 및 번역을 위한 문서를 따라가세요.
 keywords:
@@ -1438,6 +1438,179 @@ return (
 > - [`dir` attribute](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/dir)
 > - [`aria-current` attribute](https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
+### (선택 사항) 단계 1 : 컴포넌트 콘텐츠 추출
+
+기존 코드베이스가 있는 경우 수천 개의 파일을 변환하는 데 시간이 많이 걸릴 수 있습니다.
+
+이 프로세스를 용이하게 하기 위해 Intlayer는 컴포넌트를 변환하고 콘텐츠를 추출하기 위한 [컴파일러](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/compiler.md) / [추출기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/extract.md)를 제안합니다.
+
+설정하려면 `intlayer.config.ts` 파일에 `compiler` 섹션을 추가할 수 있습니다.
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... 나머지 구성
+  compiler: {
+    /**
+     * 컴파일러 활성화 여부를 나타냅니다.
+     */
+    enabled: true,
+
+    /**
+     * 출력 파일 경로를 정의합니다.
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * 변환 후 컴포넌트를 저장할지 여부를 나타냅니다. 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
+     */
+    saveComponents: false,
+
+    /**
+     * 사전 키 접두사
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... 나머지 구성
+  compiler: {
+    /**
+     * 컴파일러 활성화 여부를 나타냅니다.
+     */
+    enabled: true,
+
+    /**
+     * 출력 파일 경로를 정의합니다.
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * 변환 후 컴포넌트를 저장할지 여부를 나타냅니다. 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
+     */
+    saveComponents: false,
+
+    /**
+     * 사전 키 접두사
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ... 나머지 구성
+  compiler: {
+    /**
+     * 컴파일러 활성화 여부를 나타냅니다.
+     */
+    enabled: true,
+
+    /**
+     * 출력 파일 경로를 정의합니다.
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * 변환 후 컴포넌트를 저장할지 여부를 나타냅니다. 그렇게 하면 컴파일러를 한 번만 실행하여 앱을 변환한 다음 제거할 수 있습니다.
+     */
+    saveComponents: false,
+
+    /**
+     * 사전 키 접두사
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+module.exports = config;
+```
+
+<Tabs>
+ <Tab value='추출 명령'>
+
+컴포넌트를 변환하고 콘텐츠를 추출하기 위해 추출기를 실행합니다
+
+```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='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: [
+    // 컴포넌트에서 콘텐츠를 사전으로 추출
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+  ],
+};
+```
+
+```bash packageManager="npm"
+npm run build # 또는 npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # 또는 pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # 또는 yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
+
 ### (선택 사항) 11단계: 지역화된 링크 컴포넌트 생성하기
 
 애플리케이션의 내비게이션이 현재 로케일을 준수하도록 하려면, 커스텀 `Link` 컴포넌트를 만들 수 있습니다. 이 컴포넌트는 내부 URL에 현재 언어를 자동으로 접두사로 붙여줍니다. 예를 들어, 프랑스어 사용자가 "About" 페이지로 가는 링크를 클릭하면 `/about` 대신 `/fr/about`로 리디렉션됩니다.