@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.20

package/docs/ko/compat/svelte-i18n.md

@@ -0,0 +1,47 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Svelte I18n에서 Intlayer로 마이그레이션"
+description: "compat adapter를 사용하여 Svelte 애플리케이션을 svelte-i18n에서 Intlayer로 마이그레이션하는 방법을 알아보세요."
+keywords:
+  - svelte-i18n
+  - svelte
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - svelte-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# Svelte I18n에서 Intlayer로 마이그레이션
+
+compat adapter를 사용하여 Svelte 애플리케이션을 `svelte-i18n`에서 Intlayer로 이동하는 것은 매우 간단합니다.
+
+## 해야 할 일
+
+프로젝트에서 initialization 명령을 실행하세요:
+
+```bash
+npx intlayer init
+```
+
+이렇게 하면 `intlayer.config.ts`가 생성됩니다. SvelteKit / Vite plugins을 Intlayer의 alias plugin으로 래핑하여 `svelte-i18n`을 `@intlayer/svelte-i18n`으로 매끄럽게 매핑하는지 확인하세요.
+
+## 내부적으로 어떻게 작동하는지
+
+Svelte-i18n은 heavily used stores (`$_`, `$t`, `$format`, 등)와 ICU MessageFormat에 의존합니다.
+
+내부적으로:
+
+- **Stores:** Intlayer는 `svelte-i18n` stores를 proxy합니다. `$_`는 현재 locale을 반환하는 Intlayer resolver의 derived store가 됩니다.
+- **Keys:** flat keys (예: `$_('home.title')`)는 첫 번째 path segment가 Intlayer dictionary를 나타내도록 평가됩니다.
+- **ICU Syntax:** shared ICU resolver (`intl-messageformat` equivalent parsing)에 의해 완벽하게 처리됩니다.
+- **Formatters:** `$date`, `$time`, `$number` 호출은 Intlayer의 native core formatters로 안전하게 리다이렉트됩니다.
+- **Babel/SWC Analysis:** Intlayer analyzer는 compilation 전에 `.svelte` 소스 파일 내부의 Svelte store callers (`$_`)를 읽어 관련 dictionary chunks를 자동으로 빌드합니다.

package/docs/ko/compat/transloco.md

@@ -0,0 +1,45 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Transloco에서 Intlayer로 마이그레이션"
+description: "compat adapter를 사용하여 Angular 애플리케이션을 Transloco에서 Intlayer로 마이그레이션하는 방법을 알아보세요."
+keywords:
+  - transloco
+  - angular
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - transloco
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# Transloco에서 Intlayer로 마이그레이션
+
+Angular 애플리케이션이 현재 `@jsverse/transloco`를 사용하는 경우 compat adapter를 사용하여 Intlayer로 마이그레이션할 수 있습니다. 이 전환을 통해 기존 template 구문을 유지하면서 Intlayer의 강력한 dictionary 구조를 활용할 수 있습니다.
+
+## 해야 할 일
+
+프로젝트에서 initialization 명령을 실행하세요:
+
+```bash
+npx intlayer init
+```
+
+필요한 `intlayer.config.ts` 설정이 생성됩니다. 그런 다음 Transloco imports를 `@intlayer/transloco` modules로 바꾸거나 build aliases에 의존할 수 있습니다.
+
+## 내부적으로 어떻게 작동하는지
+
+Transloco는 scopes와 `TranslocoService` (`translate`, `selectTranslate`), structural directives (`*transloco="let t"`), pipes (`| transloco`)를 사용합니다.
+
+내부적으로:
+
+- **Scopes:** Intlayer dictionary keys에 자연스럽게 매핑되어 bundle optimization을 위한 훌륭한 pruning 옵션을 제공합니다.
+- **Service & Directives:** Intlayer의 Angular adapter는 providers를 완벽하게 교체하여 기존 template pipes와 directives가 Intlayer dictionaries에 대해 strings를 resolve할 수 있게 합니다.
+- **Build time parsing:** TypeScript analyzer는 `instant/get` 호출을 인식하고 fallback pruning은 template 사용이 정적으로 추적 불가능한 경우에도 정확성을 보장합니다.

package/docs/ko/compat/vue-i18n.md

@@ -0,0 +1,58 @@
+---
+createdAt: 2026-06-13
+updatedAt: 2026-06-13
+title: "Vue I18n에서 Intlayer로 마이그레이션"
+description: "compat adapter를 사용하여 Vue 애플리케이션을 vue-i18n에서 Intlayer로 마이그레이션하는 방법을 알아보세요."
+keywords:
+  - vue-i18n
+  - vue
+  - intlayer
+  - migration
+  - compat
+slugs:
+  - doc
+  - compatibility
+  - vue-i18n
+history:
+  - version: 9.0.0
+    date: 2026-06-13
+    changes: "Init history"
+author: aymericzip
+---
+
+# Vue I18n에서 Intlayer로 마이그레이션
+
+Vue 애플리케이션이 현재 `vue-i18n`을 사용하고 있다면 컴포넌트나 translation hooks를 다시 작성하지 않고 Intlayer로 마이그레이션할 수 있습니다. Intlayer는 내부적으로 Intlayer의 강력한 기능을 활용하면서 `vue-i18n`의 API를 완벽하게 반영하는 compat adapter를 제공합니다.
+
+## 해야 할 일
+
+시작하려면 프로젝트에서 initialization 명령을 실행하세요:
+
+```bash
+npx intlayer init
+```
+
+Initialization 중에 Intlayer는 설정 파일 (`intlayer.config.ts`)을 설정하고 마이그레이션을 위해 프로젝트를 준비합니다. `vue-i18n` imports를 자동으로 alias하기 위해 Vite 설정에 Intlayer plugin을 추가하기만 하면 됩니다.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vue(), vueI18nVitePlugin()],
+});
+```
+
+## 내부적으로 어떻게 작동하는지
+
+`vueI18nVitePlugin`은 bundler에 module alias를 주입합니다. 코드베이스의 `vue-i18n` import는 투명하게 `@intlayer/vue-i18n`으로 리다이렉트됩니다.
+
+**내부적으로 adapter는 복잡한 `vue-i18n` 구문을 네이티브로 처리합니다:**
+
+- **Interpolation & Plurals:** `{name}`과 list `{0}` interpolations을 resolve합니다. Pipe plurals (`"car | cars"`)은 위치 의미론에 따라 Intlayer enumeration/plural nodes로 변환됩니다.
+- **Formats:** `d()`와 `n()` 같은 함수는 내부적으로 `Intl`을 래핑하여 options에 정의된 `datetimeFormats`와 `numberFormats`를 지원합니다.
+- **Global & Local State:** `global.locale`은 Intlayer client에서 지원되는 `WritableComputedRef`로 매핑되므로 reactivity는 정확히 예상대로 작동합니다 (예: `locale.value = 'fr'`).
+- **Directives:** `v-t` directive는 등록되고 정상적으로 작동합니다.
+
+애플리케이션은 이전과 정확히 동일하게 계속 렌더링되지만 콘텐츠는 Intlayer dictionaries로 제공되어 type safety, 더 나은 bundle optimization, seamless CMS integration을 제공합니다.

package/docs/ko/compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-03-12
+updatedAt: 2026-06-23
 title: Intlayer 컴파일러 | i18n을 위한 자동화된 콘텐츠 추출
 description: Intlayer 컴파일러로 국제화 프로세스를 자동화하세요. Vite, Next.js 등에서 더 빠르고 효율적인 i18n을 위해 컴포넌트에서 직접 콘텐츠를 추출합니다.
 keywords:
@@ -60,6 +60,8 @@ author: aymericzip
 
 ## 사용법
 
+> The quickest way to wire the compiler in is the interactive setup: run `npx intlayer init --interactive` and select **Compiler**. On Vite there is nothing to configure — the compiler is plugged in directly through the `intlayerCompiler()` plugin. On Next.js the command scaffolds the `babel.config.js` shown below. The non-interactive `intlayer init` leaves the compiler setup untouched.
+
 <Tabs>
  <Tab value='vite'>
 
@@ -79,12 +81,15 @@ npm install vite-intlayer
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
-    intlayer(),
-    intlayerCompiler(), // 컴파일러 플러그인 추가
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
   ],
 });
 ```

package/docs/ko/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-06-17
+updatedAt: 2026-07-11
 title: 구성 (Configuration)
 description: 애플리케이션에 Intlayer를 구성하는 방법을 알아보세요. 필요에 따라 Intlayer를 맞춤설정하는 데 사용할 수 있는 다양한 설정과 옵션을 이해하세요.
 keywords:
@@ -14,6 +14,12 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 9.0.0
+    date: 2026-07-11
+    changes: "`analytics` 구성 추가"
+  - version: 9.0.0
+    date: 2026-06-24
+    changes: "Add `enableProxy` option to the routing configuration"
   - version: 8.10.0
     date: 2026-06-17
     changes: "사전 구성에 `format` 옵션 추가"
@@ -352,6 +358,30 @@ const config: IntlayerConfig = {
     liveSync: true,
   },
 
+  /**
+   * 애널리틱스(analytics) 구성.
+   */
+  analytics: {
+    /**
+     * 애널리틱스 수집 활성화 여부(페이지 뷰, 콘텐츠 노출, A/B 이벤트).
+     * 귀속(attribution)을 위해 `editor.clientId`가 설정되어 있어야 합니다.
+     * 기본값: false
+     */
+    enabled: true,
+
+    /**
+     * 백엔드로 자동 일괄 전송하는 간격(밀리초).
+     * 기본값: 20000
+     */
+    flushInterval: 20000,
+
+    /**
+     * 기록할 세션의 비율, 0(없음)에서 1(전체) 사이.
+     * 기본값: 1
+     */
+    sampleRate: 1,
+  },
+
   /**
    * AI 기반 번역 및 생성 설정.
    */
@@ -665,6 +695,20 @@ export default config;
 
 ---
 
+### 애널리틱스 구성 (Analytics)
+
+Intlayer 애널리틱스와 관련된 설정을 정의합니다: 사용자에게 실제로 표시되는 콘텐츠(페이지 뷰, 콘텐츠 노출)를 수집하고 콘텐츠에 대한 A/B 테스트를 지원합니다.
+
+애널리틱스는 철저히 옵트인(opt-in) 방식입니다: `analytics.enabled`가 명시적으로 `true`로 설정되고 **그리고** 귀속을 위한 프로젝트 키(`editor.clientId`)가 구성되지 않는 한 아무것도 수집되지 않습니다. 비활성화된 경우(기본값), 전체 애널리틱스 통합은 애플리케이션 번들에서 데드 코드 제거(dead-code elimination)됩니다.
+
+| 필드            | 설명                                                                | 타입      | 기본값  | 예시    | 참고                                                                                                                                  |
+| --------------- | ------------------------------------------------------------------- | --------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `enabled`       | 애널리틱스 수집을 활성화합니다(페이지 뷰, 콘텐츠 노출, A/B 이벤트). | `boolean` | `false` | `true`  | 귀속을 위해 `editor.clientId`가 설정되어 있어야 합니다. 설정되지 않으면 `enabled`가 `true`여도 애널리틱스는 비활성 상태로 유지됩니다. |
+| `flushInterval` | 백엔드로 자동 일괄 전송하는 간격(밀리초).                           | `number`  | `20000` | `10000` |                                                                                                                                       |
+| `sampleRate`    | 기록할 세션의 비율, `0`(없음)에서 `1`(전체) 사이.                   | `number`  | `1`     | `0.5`   | 샘플링은 세션별로 결정적이므로, 기록된 세션은 자신의 모든 이벤트를 보고합니다(부분 퍼널 없음).                                        |
+
+---
+
 ### 라우팅 구성 (Routing)
 
 URL 구조, 로케일 저장 및 미들웨어 처리를 포함하여 라우팅 동작을 제어하기 위한 설정입니다.
@@ -882,6 +926,21 @@ export default config;
 
 ---
 
+### 시스템 구성
+
+Intlayer의 내부 경로 및 출력 결과와 관련된 설정입니다. 이러한 설정은 일반적으로 내부용이며 사용자가 수정할 필요가 없습니다.
+
+| Field                     | Description                                                          | Type     | Default                           | Example              | Note                                                  |
+| ------------------------- | -------------------------------------------------------------------- | -------- | --------------------------------- | -------------------- | ----------------------------------------------------- |
+| `baseDir`                 | 프로젝트의 기본 디렉토리입니다.                                      | `string` | `process.cwd()`                   | `'/path/to/project'` | 모든 Intlayer 관련 디렉토리를 해석하는 데 사용됩니다. |
+| `dictionariesDir`         | 로컬라이제이션 딕셔너리를 저장할 디렉토리 경로입니다.                | `string` | `'.intlayer/dictionary'`          |                      |                                                       |
+| `moduleAugmentationDir`   | 모듈 확대용 디렉토리이며, IDE 제안 및 타입 검사 기능을 향상시킵니다. | `string` | `'.intlayer/types'`               | `'intlayer-types'`   | `tsconfig.json`에 포함되어 있는지 확인하세요.         |
+| `unmergedDictionariesDir` | 병합되지 않은 딕셔너리를 저장할 디렉토리입니다.                      | `string` | `'.intlayer/unmerged_dictionary'` |                      |                                                       |
+| `typesDir`                | 딕셔너리 타입을 저장할 디렉토리입니다.                               | `string` | `'.intlayer/types'`               |                      |                                                       |
+| `mainDir`                 | 주요 애플리케이션 파일이 저장된 디렉토리입니다.                      | `string` | `'.intlayer/main'`                |                      |                                                       |
+| `configDir`               | 구성 파일이 저장된 디렉토리입니다.                                   | `string` | `'.intlayer/config'`              |                      |                                                       |
+| `cacheDir`                | 캐시 파일이 저장된 디렉토리입니다.                                   | `string` | `'.intlayer/cache'`               |                      |                                                       |
+
 ### 딕셔너리 구성 (Dictionary)
 
 자동 채우기 동작 및 콘텐츠 생성을 포함하여 딕셔너리 작업을 제어하기 위한 옵션입니다.
@@ -990,22 +1049,6 @@ Intlayer가 애플리케이션의 국제화를 최적화하고 컴파일하는
 
 ---
 
-### 시스템 구성 (System)
-
-이 설정은 고급 사용자와 Intlayer 내부 구성을 위한 것입니다.
-
-| 필드                      | 설명                                      | 타입     | 기본값                            | 예시 | 참고 |
-| ------------------------- | ----------------------------------------- | -------- | --------------------------------- | ---- | ---- |
-| `dictionariesDir`         | 컴파일된 딕셔너리의 위치.                 | `string` | `'.intlayer/dictionary'`          |      |      |
-| `moduleAugmentationDir`   | TypeScript 모듈 보강이 위치할 디렉토리.   | `string` | `'.intlayer/types'`               |      |      |
-| `unmergedDictionariesDir` | 병합되지 않은 딕셔너리가 위치할 디렉토리. | `string` | `'.intlayer/unmerged_dictionary'` |      |      |
-| `typesDir`                | 생선된 타입이 위치할 디렉토리.            | `string` | `'.intlayer/types'`               |      |      |
-| `mainDir`                 | Intlayer 메인 파일이 위치할 디렉토리.     | `string` | `'.intlayer/main'`                |      |      |
-| `configDir`               | 컴파일된 구성 파일이 위치할 디렉토리.     | `string` | `'.intlayer/config'`              |      |      |
-| `cacheDir`                | 캐시 파일이 위치할 디렉토리.              | `string` | `'.intlayer/cache'`               |      |      |
-
----
-
 ### 컴파일러 구성 (Compiler)
 
 컴포넌트에서 직접 딕셔너리를 수집하는 Intlayer 컴파일러의 설정을 제어합니다.

package/docs/ko/custom_domains.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-02
-updatedAt: 2026-04-02
+updatedAt: 2026-06-23
 title: 사용자 정의 도메인
 description: 전용 호스트 이름에서 서로 다른 로케일을 제공하기 위해 Intlayer에서 도메인 기반 로케ール 라우팅을 구성하는 방법을 알아봅니다.
 keywords:
@@ -172,10 +172,16 @@ GET intlayer.zh/about
 
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
-  plugins: [intlayerProxy()],
+  plugins: [
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
 });
 ```
 

package/docs/ko/custom_url_rewrites.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-01-26
+updatedAt: 2026-06-23
 title: 맞춤형 URL 재작성
 description: Intlayer에서 로케일별 경로를 정의하기 위해 맞춤형 URL 재작성(custom URL rewrites)을 구성하고 사용하는 방법을 알아봅니다.
 keywords:
@@ -342,10 +342,16 @@ SolidJS, Vue, Svelte의 경우, 개발 중 리라이트를 `intlayerProxy` Vite
 
 ```typescript fileName="vite.config.ts"
 import { defineConfig } from "vite";
-import { intlayerProxy } from "vite-intlayer";
+import { intlayer } from "vite-intlayer";
 
 export default defineConfig({
-  plugins: [intlayerProxy()],
+  plugins: [
+    intlayer({
+      proxy: {
+        ignore: (req) => req.url?.startsWith("/api"),
+      },
+    }),
+  ],
 });
 ```
 

package/docs/ko/dictionary/content_file.md

@@ -347,26 +347,6 @@ content: { /* ... */ }
 }
 ```
 
-#### `format` ('intlayer' | 'icu' | 'i18next')
-
-사전 콘텐츠에 사용할 포맷터를 지정합니다. 이를 통해 다양한 메시지 포맷팅 구문을 사용할 수 있습니다.
-
-- `'intlayer'`: 기본 Intlayer 포맷터.
-- `'icu'`: ICU 메시지 포맷팅을 사용합니다.
-- `'i18next'`: i18next 메시지 포맷팅을 사용합니다.
-
-**예시:**
-
-```typescript
-{
-  key: "my-dictionary",
-  format: "icu",
-  content: {
-    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"
-  }
-}
-```
-
 #### `locale` (LocalesValues)
 
 사전을 각 로케일별 사전으로 변환하며, content에 선언된 각 필드는 자동으로 번역 노드로 변환됩니다. 이 속성이 설정되면:
@@ -599,6 +579,10 @@ export default aboutPageMetaContent;
 
 원격 사전의 경우, 원격 서버에서 사전을 고유하게 식별하는 식별자입니다. 원격 콘텐츠를 가져오고 관리하는 데 사용됩니다.
 
+##### `projectIds` (string[])
+
+원격 사전의 경우, 이 배열은 이 사전을 사용할 수 있는 프로젝트의 ID를 포함합니다. 원격 사전은 여러 프로젝트 간에 공유될 수 있습니다.
+
 ##### `localId` (LocalDictionaryId)
 
 로컬 사전의 고유 식별자입니다. Intlayer가 자동으로 생성하며, 사전이 로컬인지 원격인지 및 위치를 식별하는 데 도움을 줍니다.
@@ -619,13 +603,6 @@ export default aboutPageMetaContent;
 
 사전이 외부 소스에서 자동으로 채워졌는지 여부를 나타냅니다. 충돌이 발생할 경우, 기본 사전이 자동 채워진 사전을 덮어씁니다.
 
-##### `location` ('distant' | 'locale')
-
-사전의 위치를 나타냅니다:
-
-- `'locale'`: 로컬 사전 (콘텐츠 파일에서 가져옴)
-- `'distant'`: 원격 사전 (외부 소스에서 가져옴)
-
 ## 콘텐츠 노드 유형
 
 Intlayer는 기본 원시 값을 확장하는 여러 전문화된 콘텐츠 노드 유형을 제공합니다:

package/docs/ko/dictionary/enumeration.md

@@ -468,193 +468,6 @@ document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
   </Tab>
 </Tabs>
 
-## Combining Enumeration with Insert for Ordinal Numbers
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use enumeration in a React component, you can leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>
-        {
-          numberOfCar(0) // Output: No cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(6) // Output: Some cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(20) // Output: Many cars
-        }
-      </p>
-      <p>
-        {
-          numberOfCar(0.01) // Output: Fallback value
-        }
-      </p>
-    </div>
-  );
-};
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use enumeration in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use enumeration in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-const { numberOfCar } = useIntlayer("car_count");
-</script>
-
-<template>
-  <div>
-    <p>{{ numberOfCar(6) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use enumeration in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-const content = useIntlayer("car_count");
-</script>
-
-<div>
-  <p>{$content.numberOfCar(6)}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use enumeration in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const CarComponent: FC = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use enumeration in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const CarComponent: Component = () => {
-  const { numberOfCar } = useIntlayer("car_count");
-
-  return (
-    <div>
-      <p>{numberOfCar(6)}</p>
-    </div>
-  );
-};
-
-export default CarComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use enumeration in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-car",
-  template: `
-    <div>
-      <p>{{ content().numberOfCar(6) }}</p>
-    </div>
-  `,
-})
-export class CarComponent {
-  content = useIntlayer("car_count");
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use enumeration with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("car_count").onChange((newContent) => {
-  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
-});
-
-// Initial render
-document.getElementById("cars")!.textContent = content.numberOfCar(6);
-```
-
-  </Tab>
-</Tabs>
 ## Additional Resources
 
 For more detailed information on configuration and usage, refer to the following resources:

package/docs/ko/dictionary/insertion.md

@@ -134,12 +134,6 @@ export default InsertionComponent;
 
 ## 추가 자료
 
-설정 및 사용법에 대한 자세한 정보는 다음 자료를 참조하세요:
-
-- [Intlayer CLI 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/index.md)
-
-## 추가 자료
-
 구성 및 사용법에 대한 자세한 정보는 다음 자료를 참조하세요:
 
 - [Intlayer CLI 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/cli/index.md)

package/docs/ko/dictionary/nesting.md

@@ -27,6 +27,45 @@ Intlayer에서 중첩은 `nest` 함수를 통해 이루어지며, 이를 통해
 
 ## 중첩 설정
 
+Intlayer 프로젝트에서 중첩을 설정하려면 먼저 재사용하려는 기본 콘텐츠를 정의합니다. 그런 다음 별도의 콘텐츠 모듈에서 `nest` 함수를 사용하여 해당 콘텐츠를 가져옵니다.
+
+### 기본 Dictionary
+
+다른 dictionary에 중첩할 기본 dictionary의 예시입니다:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
+## 중첩 설정
+
 <Tabs group="framework">
   <Tab label="React" value="react">