@intlayer/docs 7.0.4 → 7.0.6

package/blog/ja/intlayer_with_vue-i18n.md

@@ -0,0 +1,180 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-10-29
+title: Intlayer と vue-i18n
+description: 包括的な Vue.js 国際化ソリューションのために Intlayer を vue-i18n と統合する
+keywords:
+  - vue-i18n
+  - Intlayer
+  - 国際化
+  - ブログ
+  - Vue.js
+  - Nuxt
+  - JavaScript
+  - Vue
+slugs:
+  - blog
+  - intlayer-with-vue-i18n
+history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: loadJSON プラグインを追加
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: syncJSON プラグインへの変更と包括的な書き直し
+---
+
+# vue-i18n と Intlayer を使った Vue.js の国際化 (i18n)
+
+## 目次
+
+<TOC/>
+
+## Intlayer とは？
+
+**Intlayer** は、従来の i18n ソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Vue.js および Nuxt アプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。
+
+具体的な比較は、当社のブログ記事 [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/vue-i18n_vs_intlayer.md) をご覧ください。
+
+## なぜ Intlayer を vue-i18n と組み合わせるのか？
+
+Intlayer は優れた単独の i18n ソリューションを提供します（[Vue.js 統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+vue.md) を参照）が、いくつかの理由で vue-i18n と組み合わせたい場合があります：
+
+1. **既存のコードベース**: 既に確立された vue-i18n の実装があり、Intlayer の改善された開発者体験へ段階的に移行したい場合。
+2. **レガシー要件**: プロジェクトが既存の vue-i18n プラグインやワークフローとの互換性を必要とする場合。
+3. **チームの慣れ**: チームが vue-i18n に慣れているが、より良いコンテンツ管理を望んでいる場合。
+4. **Intlayer の機能利用**: コンテンツ宣言、翻訳の自動化、翻訳のテストなど、Intlayer の機能を利用したい場合。
+
+**そのために、Intlayer は vue-i18n のアダプターとして実装でき、CLI や CI/CD パイプラインでの JSON 翻訳の自動化、翻訳のテストなどを支援します。**
+
+このガイドでは、vue-i18nとの互換性を維持しながら、Intlayerの優れたコンテンツ宣言システムを活用する方法を示します。
+
+---
+
+## vue-i18nとIntlayerをセットアップするステップバイステップガイド
+
+### ステップ1: 依存関係のインストール
+
+お好みのパッケージマネージャーを使用して必要なパッケージをインストールします:
+
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
+
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
+**パッケージの説明:**
+
+- **intlayer**: コンテンツ宣言と管理のためのコアライブラリ
+- **@intlayer/sync-json-plugin**: Intlayerのコンテンツ宣言をvue-i18nのJSON形式に同期するプラグイン
+
+### ステップ2: JSONをラップするためのIntlayerプラグインの実装
+
+サポートするロケールを定義するためにIntlayerの設定ファイルを作成します。
+
+**vue-i18n用のJSON辞書もエクスポートしたい場合は、`syncJSON`プラグインを追加してください:**
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
+
+`syncJSON`プラグインはJSONを自動的にラップします。コンテンツの構造を変更することなく、JSONファイルの読み書きを行います。
+
+もしそのJSONとintlayerのコンテンツ宣言ファイル（`.content`ファイル）を共存させたい場合、Intlayerは以下の手順で処理します：
+
+1. JSONファイルとコンテンツ宣言ファイルの両方を読み込み、intlayerの辞書に変換します。
+2. JSONとコンテンツ宣言ファイルの間に競合がある場合、Intlayerはそれらすべての辞書をマージします。プラグインの優先度やコンテンツ宣言ファイルの優先度に応じて処理されます（すべて設定可能です）。
+
+CLIを使ってJSONの翻訳を変更した場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
+
+`syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)を参照してください。
+
+---
+
+### （オプション）ステップ3：コンポーネントごとのJSON翻訳の実装
+
+デフォルトでは、IntlayerはJSONファイルとコンテンツ宣言ファイルの両方を読み込み、マージし、同期します。詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。しかし、必要に応じてIntlayerプラグインを使用して、コードベースのどこにでもあるJSONのローカライズをコンポーネントごとに管理することも可能です。
+
+そのためには、`loadJSON`プラグインを使用できます。
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // 現在のJSONファイルをIntlayerの辞書と同期させる
+  plugins: [
+    /**
+     * src内の{key}.i18n.jsonパターンに一致するすべてのJSONファイルを読み込みます
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // これらのJSONファイルが`./locales/en/${key}.json`のファイルより優先されることを保証します
+    }),
+    /**
+     * ローカルディレクトリ内のJSONファイルに出力と翻訳を書き戻しながら読み込みます
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
+
+export default config;
+```
+
+これは、`src` ディレクトリ内の `{key}.i18n.json` パターンに一致するすべての JSON ファイルを読み込み、Intlayer の辞書としてロードします。
+
+---
+
+## Git 設定
+
+生成されたファイルをバージョン管理から除外します：
+
+```plaintext fileName=".gitignore"
+# Intlayer によって生成されたファイルを無視する
+.intlayer
+intl
+```
+
+これらのファイルはビルドプロセス中に自動的に再生成されるため、リポジトリにコミットする必要はありません。
+
+### VS Code 拡張機能
+
+開発者体験を向上させるために、公式の **Intlayer VS Code 拡張機能** をインストールしてください：
+
+[VS Code マーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/ko/intlayer_with_i18next.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-10-29
+updatedAt: 2025-11-01
 title: Intlayer를 사용하여 i18next JSON 번역 자동화하는 방법
 description: JavaScript 애플리케이션에서 향상된 국제화를 위해 Intlayer와 i18next를 사용하여 JSON 번역을 자동화하세요.
 keywords:
@@ -20,6 +20,9 @@ slugs:
   - blog
   - intlayer-with-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: loadJSON 플러그인 추가
   - version: 7.0.0
     date: 2025-10-29
     changes: syncJSON 플러그인으로 변경
@@ -29,17 +32,18 @@ history:
 
 ## Intlayer란 무엇인가요?
 
-**Intlayer**는 전통적인 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. JavaScript 애플리케이션에서 현대적인 콘텐츠 관리를 제공합니다.
+**Intlayer**는 전통적인 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. JavaScript 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.
 
 i18next와의 구체적인 비교는 저희 블로그 게시물 [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md)에서 확인할 수 있습니다.
 
-## 왜 Intlayer와 i18next를 함께 사용해야 할까요?
+## 왜 Intlayer와 i18next를 결합해야 할까요?
 
-Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내용은 [Next.js 통합 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_16.md)를 참조), 다음과 같은 여러 이유로 i18next와 함께 사용하고자 할 수 있습니다:
+Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내용은 [Next.js 통합 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_16.md)를 참조), 다음과 같은 여러 이유로 i18next와 결합하여 사용할 수 있습니다:
 
-1. **기존 코드베이스**: 이미 구축된 i18next 구현이 있으며 Intlayer의 향상된 개발자 경험으로 점진적으로 이전하고자 할 때.
-2. **레거시 요구사항**: 프로젝트가 기존 i18next 플러그인 또는 워크플로우와의 호환성을 필요로 할 때.
-3. **팀 친숙도**: 팀이 i18next에 익숙하지만 더 나은 콘텐츠 관리를 원할 때.
+1. **기존 코드베이스**: 이미 구축된 i18next 구현이 있으며 Intlayer의 향상된 개발자 경험으로 점진적으로 마이그레이션하고자 합니다.
+2. **레거시 요구사항**: 프로젝트가 기존 i18next 플러그인 또는 워크플로우와의 호환성을 필요로 합니다.
+3. **팀 친숙도**: 팀이 i18next에 익숙하지만 더 나은 콘텐츠 관리를 원합니다.
+4. **Intlayer 기능 사용**: 콘텐츠 선언, 번역 키 관리, 번역 상태 등 Intlayer의 기능을 사용하고자 합니다.
 
 **이를 위해 Intlayer는 i18next의 어댑터로 구현되어 CLI 또는 CI/CD 파이프라인에서 JSON 번역 자동화, 번역 테스트 등 다양한 작업을 지원할 수 있습니다.**
 
@@ -49,7 +53,7 @@ Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내
 
 <TOC/>
 
-## i18next와 함께 Intlayer 설정 단계별 가이드
+## Intlayer를 i18next와 함께 설정하는 단계별 가이드
 
 ### 1단계: 의존성 설치
 
@@ -67,6 +71,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **패키지 설명:**
 
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
@@ -74,7 +82,7 @@ yarn add intlayer @intlayer/sync-json-plugin
 
 ### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
 
-지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만드세요:
+지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
 **i18next용 JSON 사전도 내보내고 싶다면**, `syncJSON` 플러그인을 추가하세요:
 
@@ -89,7 +97,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -97,47 +105,70 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-`syncJSON` 플러그인은 JSON을 자동으로 래핑합니다. 콘텐츠 구조를 변경하지 않고 JSON 파일을 읽고 씁니다.
+`syncJSON` 플러그인은 JSON을 자동으로 래핑합니다. 콘텐츠 구조를 변경하지 않고 JSON 파일을 읽고 쓸 수 있습니다.
 
 만약 JSON과 intlayer 콘텐츠 선언 파일(`.content` 파일)을 공존시키고 싶다면, Intlayer는 다음과 같이 처리합니다:
 
-    1. JSON과 콘텐츠 선언 파일을 모두 로드하여 intlayer 사전(dictionary)으로 변환합니다.
+1. JSON 파일과 콘텐츠 선언 파일을 모두 로드하여 intlayer 사전(dictionary)으로 변환합니다.
+2. JSON과 콘텐츠 선언 파일 간에 충돌이 있을 경우, Intlayer는 모든 사전을 병합합니다. 이때 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 처리되며, 모두 설정 가능합니다.
 
-2. JSON과 콘텐츠 선언 파일 간에 충돌이 있을 경우, Intlayer는 모든 사전을 병합하는 과정을 진행합니다. 이는 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 결정되며(모두 구성 가능합니다).
+CLI를 사용하여 JSON 번역을 변경하거나 CMS를 통해 변경하면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
 
-CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경 사항이 발생하면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
+`syncJSON` 플러그인에 대한 자세한 내용을 보려면 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-## Git 구성
+### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
 
-자동 생성된 Intlayer 파일을 무시하는 것이 권장됩니다:
+기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 로컬라이즈된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
-```plaintext fileName=".gitignore"
-# Intlayer에서 생성된 파일 무시
-.intlayer
-```
+이를 위해 `loadJSON` 플러그인을 사용할 수 있습니다.
 
-이 파일들은 빌드 과정 중에 다시 생성될 수 있으므로 버전 관리에 커밋할 필요가 없습니다.
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
 
-### VS Code 확장 프로그램
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
 
-개발자 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
+  // 현재 JSON 파일을 Intlayer 사전과 동기화 상태로 유지합니다
+  plugins: [
+    /**
+     * src 내에서 {key}.i18n.json 패턴에 맞는 모든 JSON 파일을 로드합니다
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // 이 JSON 파일들이 `./locales/en/${key}.json` 파일보다 우선권을 갖도록 보장합니다
+    }),
+    /**
+     * locales 디렉토리 내 JSON 파일에 출력 및 번역을 로드하고 다시 씁니다
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
 
-[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+export default config;
+```
 
-2. JSON과 콘텐츠 선언 파일 간에 충돌이 있는 경우, Intlayer는 모든 사전을 병합하여 처리합니다. 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 달라집니다(모두 구성 가능).
+이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 불러와 Intlayer 사전으로 로드합니다.
 
-CLI를 사용하여 JSON을 번역하거나 CMS를 사용하여 변경 사항이 이루어지면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
+---
 
-## Git 구성
+## Git 설정
 
-자동 생성된 Intlayer 파일을 무시하는 것이 권장됩니다:
+자동 생성된 Intlayer 파일은 무시하는 것이 권장됩니다:
 
 ```plaintext fileName=".gitignore"
 # Intlayer에서 생성된 파일 무시
 .intlayer
 ```
 
-이 파일들은 빌드 과정 중에 다시 생성될 수 있으므로 버전 관리에 커밋할 필요가 없습니다.
+이 파일들은 빌드 과정에서 다시 생성될 수 있으므로 버전 관리에 커밋할 필요가 없습니다.
 
 ### VS Code 확장 프로그램
 

package/blog/ko/intlayer_with_next-i18next.md

@@ -2,7 +2,7 @@
 createdAt: 2025-08-23
 updatedAt: 2025-10-29
 title: Intlayer와 next-i18next
-description: 포괄적인 Next.js 국제화 솔루션을 위해 Intlayer를 next-i18next와 통합하기
+description: 포괄적인 Next.js 국제화 솔루션을 위한 Intlayer와 next-i18next 통합
 keywords:
   - i18next
   - next-i18next
@@ -16,6 +16,9 @@ slugs:
   - blog
   - intlayer-with-next-i18next
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: loadJSON 플러그인 추가
   - version: 7.0.0
     date: 2025-10-29
     changes: syncJSON 플러그인으로 변경 및 전면 개편
@@ -34,7 +37,7 @@ history:
 하지만 next-i18next에는 몇 가지 어려움이 있습니다:
 
 - **복잡한 설정**: next-i18next를 설정하려면 여러 구성 파일과 서버 측 및 클라이언트 측 i18n 인스턴스의 신중한 설정이 필요합니다.
-- **분산된 번역 파일**: 번역 파일이 일반적으로 컴포넌트와 별도의 디렉토리에 저장되어 일관성 유지가 어렵습니다.
+- **분산된 번역 파일**: 번역 파일이 일반적으로 컴포넌트와 별도의 디렉토리에 저장되어 일관성을 유지하기 어렵습니다.
 - **수동 네임스페이스 관리**: 개발자가 네임스페이스를 수동으로 관리하고 번역 리소스가 제대로 로드되도록 해야 합니다.
 - **제한된 타입 안전성**: TypeScript 지원은 추가 구성이 필요하며 번역에 대한 자동 타입 생성을 제공하지 않습니다.
 
@@ -46,13 +49,13 @@ history:
 
 ## 왜 Intlayer를 next-i18next와 결합해야 하나요?
 
-Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내용은 [Next.js 통합 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_16.md)를 참조하세요), 다음과 같은 여러 이유로 next-i18next와 결합하여 사용할 수 있습니다:
+Intlayer가 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내용은 [Next.js 통합 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_16.md) 참조), 다음과 같은 여러 이유로 next-i18next와 결합하여 사용할 수 있습니다:
 
-1. **기존 코드베이스**: 이미 구축된 next-i18next 구현이 있으며 Intlayer의 향상된 개발자 경험으로 점진적으로 마이그레이션하고자 할 때.
-2. **레거시 요구사항**: 프로젝트가 기존 i18next 플러그인 또는 워크플로우와의 호환성을 필요로 할 때.
-3. **팀 친숙도**: 팀이 next-i18next에 익숙하지만 더 나은 콘텐츠 관리를 원할 때.
+1. **기존 코드베이스**: 이미 구축된 next-i18next 구현이 있으며 Intlayer의 향상된 개발자 경험으로 점진적으로 마이그레이션하려는 경우.
+2. **레거시 요구사항**: 프로젝트가 기존 i18next 플러그인 또는 워크플로우와의 호환성을 필요로 하는 경우.
+3. **팀 친숙도**: 팀이 next-i18next에 익숙하지만 더 나은 콘텐츠 관리를 원할 경우.
 
-**이를 위해 Intlayer는 next-i18next의 어댑터로 구현되어 CLI 또는 CI/CD 파이프라인에서 JSON 번역 자동화, 번역 테스트 등 다양한 작업을 지원할 수 있습니다.**
+**이를 위해, Intlayer는 next-i18next의 어댑터로 구현되어 CLI 또는 CI/CD 파이프라인에서 JSON 번역 자동화, 번역 테스트 등 다양한 작업을 지원할 수 있습니다.**
 
 이 가이드는 next-i18next와의 호환성을 유지하면서 Intlayer의 우수한 콘텐츠 선언 시스템을 활용하는 방법을 보여줍니다.
 
@@ -76,16 +79,16 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **패키지 설명:**
 
 - **intlayer**: 콘텐츠 선언 및 관리를 위한 핵심 라이브러리
-- **next-intlayer**: 빌드 플러그인이 포함된 Next.js 통합 레이어
-- **i18next**: 핵심 i18n 프레임워크
-- **next-i18next**: i18next를 위한 Next.js 래퍼
-- **i18next-resources-to-backend**: i18next를 위한 동적 리소스 로딩
-- **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 i18next JSON 형식으로 동기화하는 플러그인
+- **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 i18next JSON 형식과 동기화하는 플러그인
 
-### 2단계: JSON을 래핑하는 Intlayer 플러그인 구현
+### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
 
 지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만듭니다:
 
@@ -102,7 +105,7 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
     }),
   ],
 };
@@ -112,43 +115,63 @@ export default config;
 
 `syncJSON` 플러그인은 JSON을 자동으로 래핑합니다. 콘텐츠 구조를 변경하지 않고 JSON 파일을 읽고 씁니다.
 
-JSON과 intlayer 콘텐츠 선언 파일(`.content` 파일)을 공존시키고 싶다면, Intlayer는 다음과 같이 처리합니다:
+만약 JSON과 intlayer 콘텐츠 선언 파일(`.content` 파일)을 공존시키고 싶다면, Intlayer는 다음과 같이 처리합니다:
 
     1. JSON과 콘텐츠 선언 파일을 모두 로드하여 intlayer 사전으로 변환합니다.
+    2. JSON과 콘텐츠 선언 파일 간에 충돌이 있을 경우, Intlayer는 모든 사전을 병합합니다. 이 과정은 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 달라집니다(모두 구성 가능합니다).
 
-2. JSON과 콘텐츠 선언 파일 간에 충돌이 있는 경우, Intlayer는 모든 사전을 병합하는 과정을 진행합니다. 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 결정되며(모두 구성 가능합니다).
+CLI를 사용하여 JSON을 번역하거나 CMS를 사용하여 변경 사항이 발생하면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
 
-CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경 사항이 발생하면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
+`syncJSON` 플러그인에 대한 자세한 내용은 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
 ---
 
-## Git 구성
-
-생성된 파일을 버전 관리에서 제외하세요:
+### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
 
-```plaintext fileName=".gitignore"
-# Intlayer에서 생성된 파일 무시
-.intlayer
-intl
-```
+기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 지역화된 JSON을 컴포넌트별로 관리할 수도 있습니다.
 
-이 파일들은 빌드 과정에서 자동으로 다시 생성되므로 저장소에 커밋할 필요가 없습니다.
+이를 위해 `loadJSON` 플러그인을 사용할 수 있습니다.
 
-### VS Code 확장 프로그램
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
 
-개발자 경험 향상을 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
 
-[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+  // 현재 JSON 파일을 Intlayer 사전과 동기화 상태로 유지합니다
+  plugins: [
+    /**
+     * src 내에서 {key}.i18n.json 패턴과 일치하는 모든 JSON 파일을 로드합니다
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // 이 JSON 파일들이 `./public/locales/en/${key}.json` 파일보다 우선권을 갖도록 보장합니다
+    }),
+    /**
+     * 로케일 디렉토리 내 JSON 파일에 출력 및 번역을 다시 작성하고 로드합니다.
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
 
-2. JSON과 콘텐츠 선언 파일 간에 충돌이 있는 경우, Intlayer는 모든 사전을 병합하는 작업을 수행합니다. 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 처리됩니다(모두 구성 가능합니다).
+export default config;
+```
 
-CLI를 사용하여 JSON 번역을 변경하거나 CMS를 사용하여 변경하는 경우, Intlayer는 새 번역으로 JSON 파일을 업데이트합니다.
+이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 로드하여 Intlayer 사전으로 불러옵니다.
 
 ---
 
 ## Git 구성
 
-버전 관리에서 생성된 파일 제외:
+생성된 파일을 버전 관리에서 제외하세요:
 
 ```plaintext fileName=".gitignore"
 # Intlayer에서 생성된 파일 무시
@@ -163,3 +186,7 @@ intl
 개발자 경험 향상을 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
 
 [VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+개발자 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
+
+[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/ko/intlayer_with_next-intl.md

@@ -2,11 +2,14 @@
 createdAt: 2025-01-02
 updatedAt: 2025-10-29
 title: Intlayer를 사용하여 next-intl JSON 번역 자동화하는 방법
-description: Next.js 애플리케이션에서 향상된 국제화를 위해 Intlayer와 next-intl을 사용하여 JSON 번역을 자동화하세요.
+description: Next.js 애플리케이션에서 향상된 국제화를 위해 Intlayer와 next-intl로 JSON 번역을 자동화하세요.
 slugs:
   - blog
   - intlayer-with-next-intl
 history:
+  - version: 7.0.6
+    date: 2025-11-01
+    changes: loadJSON 플러그인 추가
   - version: 7.0.0
     date: 2025-10-29
     changes: syncJSON 플러그인으로 변경
@@ -16,16 +19,16 @@ history:
 
 ## Intlayer란 무엇인가요?
 
-**Intlayer**는 기존 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. Next.js 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.
+**Intlayer**는 전통적인 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. Next.js 애플리케이션에서 콘텐츠 관리를 위한 현대적인 접근 방식을 제공합니다.
 
-next-intl과의 구체적인 비교는 저희 [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md) 블로그 게시물을 참고하세요.
+next-intl과의 구체적인 비교는 저희 [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md) 블로그 게시물을 참조하세요.
 
-## 왜 Intlayer와 next-intl을 함께 사용해야 하나요?
+## 왜 Intlayer를 next-intl와 결합해야 할까요?
 
-Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내용은 저희 [Next.js 통합 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_16.md)를 참조), 다음과 같은 여러 이유로 next-intl과 함께 사용하고자 할 수 있습니다:
+Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내용은 저희 [Next.js 통합 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_16.md)를 참조), 다음과 같은 여러 이유로 next-intl과 결합하여 사용할 수 있습니다:
 
 1. **기존 코드베이스**: 이미 구축된 next-intl 구현이 있으며 Intlayer의 향상된 개발자 경험으로 점진적으로 이전하고자 할 때.
-2. **레거시 요구사항**: 프로젝트가 기존 next-intl 플러그인이나 워크플로우와의 호환성을 필요로 할 때.
+2. **레거시 요구사항**: 프로젝트가 기존 next-intl 플러그인 또는 워크플로우와의 호환성을 필요로 할 때.
 3. **팀 친숙도**: 팀이 next-intl에 익숙하지만 더 나은 콘텐츠 관리를 원할 때.
 
 **이를 위해 Intlayer는 next-intl의 어댑터로 구현되어 CLI 또는 CI/CD 파이프라인에서 JSON 번역 자동화, 번역 테스트 등 다양한 작업을 지원할 수 있습니다.**
@@ -54,6 +57,10 @@ pnpm add intlayer @intlayer/sync-json-plugin
 yarn add intlayer @intlayer/sync-json-plugin
 ```
 
+```bash packageManager="bun"
+bun add intlayer @intlayer/sync-json-plugin
+```
+
 **패키지 설명:**
 
 - **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
@@ -88,36 +95,58 @@ export default config;
 
 만약 JSON과 intlayer 콘텐츠 선언 파일(`.content` 파일)을 공존시키고 싶다면, Intlayer는 다음과 같이 처리합니다:
 
-    1. JSON과 콘텐츠 선언 파일을 모두 불러와 intlayer 사전으로 변환합니다.
+    1. JSON과 콘텐츠 선언 파일을 모두 로드하여 intlayer 사전(dictionary)으로 변환합니다.
 
-2. JSON과 콘텐츠 선언 파일 간에 충돌이 있는 경우, Intlayer는 모든 사전을 병합하는 과정을 진행합니다. 이는 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 달라지며(모두 구성 가능) 처리됩니다.
+2. JSON과 콘텐츠 선언 파일 간에 충돌이 있는 경우, Intlayer는 모든 사전을 병합하는 작업을 수행합니다. 이는 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 달라집니다(모두 구성 가능합니다).
 
-CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경 사항이 발생하면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
+CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경 사항이 이루어지면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
 
-## Git 구성
+`syncJSON` 플러그인에 대한 자세한 내용은 [syncJSON 플러그인 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/plugins/sync-json.md)를 참조하세요.
 
-자동 생성된 Intlayer 파일은 무시하는 것이 권장됩니다:
+### (선택 사항) 3단계: 컴포넌트별 JSON 번역 구현
 
-```plaintext fileName=".gitignore"
-# Intlayer에서 생성된 파일 무시
-.intlayer
-```
+기본적으로 Intlayer는 JSON 파일과 콘텐츠 선언 파일을 모두 로드, 병합 및 동기화합니다. 자세한 내용은 [콘텐츠 선언 문서](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/content_file.md)를 참조하세요. 하지만 원한다면 Intlayer 플러그인을 사용하여 코드베이스 어디에서나 JSON을 컴포넌트별로 관리하는 기능을 구현할 수도 있습니다.
 
-이 파일들은 빌드 과정 중에 다시 생성될 수 있으므로 버전 관리에 커밋할 필요가 없습니다.
+이를 위해 `loadJSON` 플러그인을 사용할 수 있습니다.
 
-### VS Code 확장 프로그램
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
 
-개발자 경험 향상을 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
 
-[VS Code 마켓플레이스에서 설치](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+  // 현재 JSON 파일을 Intlayer 사전과 동기화 상태로 유지합니다
+  plugins: [
+    /**
+     * src 디렉토리 내에서 {key}.i18n.json 패턴에 맞는 모든 JSON 파일을 로드합니다
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // 이 JSON 파일들이 `./locales/en/${key}.json` 파일보다 우선시되도록 합니다
+    }),
+    /**
+     * locales 디렉토리 내 JSON 파일에 출력 및 번역 내용을 다시 기록하며 로드합니다
+     */
+    syncJSON({
+      source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
+      priority: 0,
+    }),
+  ],
+};
 
-2. JSON과 콘텐츠 선언 파일 간에 충돌이 있는 경우, Intlayer는 모든 사전을 병합하여 처리합니다. 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 달라집니다(모두 구성 가능합니다).
+export default config;
+```
 
-CLI를 사용하여 JSON 번역을 변경하거나 CMS를 사용하여 변경하면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
+이 설정은 `src` 디렉토리 내에서 `{key}.i18n.json` 패턴과 일치하는 모든 JSON 파일을 로드하여 Intlayer 사전으로 불러옵니다.
 
 ## Git 구성
 
-자동 생성된 Intlayer 파일을 무시하는 것이 권장됩니다:
+자동 생성된 Intlayer 파일은 무시하는 것이 권장됩니다:
 
 ```plaintext fileName=".gitignore"
 # Intlayer에서 생성된 파일 무시
@@ -128,6 +157,6 @@ CLI를 사용하여 JSON 번역을 변경하거나 CMS를 사용하여 변경하
 
 ### VS Code 확장 프로그램
 
-개발자 경험 향상을 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
+개발자 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
 
 [VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)