@intlayer/docs 7.0.3 → 7.0.4

package/blog/ja/intlayer_with_react-intl.md

@@ -1,325 +1,123 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayerとreact-intl
-description: Reactアプリにreact-intlとIntlayerを統合する
+updatedAt: 2025-10-29
+title: Intlayerを使ったreact-intl JSON翻訳の自動化方法
+description: Reactアプリケーションの国際化を強化するために、Intlayerとreact-intlを使ってJSON翻訳を自動化する方法。
 keywords:
   - react-intl
   - Intlayer
   - 国際化
-  - ドキュメンテーション
-  - Next.js
+  - ブログ
+  - i18n
   - JavaScript
   - React
+  - FormatJS
 slugs:
   - blog
   - intlayer-with-react-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: syncJSONプラグインへの変更
 ---
 
-# React Internationalization (i18n) with **react-intl** and Intlayer
+# Intlayerを使ったreact-intl JSON翻訳の自動化方法
 
-このガイドでは、React アプリケーションでの翻訳管理のために **Intlayer** を **react-intl** と統合する方法を示します。あなたは Intlayer で翻訳可能なコンテンツを宣言し、その後 **react-intl** を使用してそれらのメッセージを利用します。このライブラリは [FormatJS](https://formatjs.io/docs/react-intl) エコシステムの人気のあるライブラリです。
+## Intlayerとは何か？
 
-## 概要
+**Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。Reactアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。
 
-- **Intlayer** は、プロジェクト内の **コンポーネントレベル** のコンテンツ宣言ファイル（JSON、JS、TS など）に翻訳を格納することを可能にします。
-- **react-intl** は、ローカライズされた文字列を表示するための React コンポーネントやフック（ `<FormattedMessage>` や `useIntl()` など）を提供します。
+具体的な比較については、当社のブログ記事[react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/react-i18next_vs_react-intl_vs_intlayer.md)をご覧ください。
 
-Intlayer を **export** 設定して、 **react-intl 互換**の形式で翻訳を生成できるようにすると、自動的に **生成** および **更新** されるメッセージファイルを `<IntlProvider>` ( react-intl から) に要求されます。
+## なぜIntlayerをreact-intlと組み合わせるのか？
 
----
+Intlayerは優れた単独のi18nソリューションを提供します（[React統合ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+react.md)をご覧ください）が、いくつかの理由でreact-intlと組み合わせたい場合があります：
 
-## なぜ Intlayer を react-intl と一緒に使うべきか？
+1. **既存のコードベース**: 既にreact-intlの実装があり、Intlayerの優れた開発者体験へ段階的に移行したい場合。
+2. **レガシー要件**: プロジェクトが既存のreact-intlプラグインやワークフローとの互換性を必要とする場合。
+3. **チームの慣れ親しみ**: チームがreact-intlに慣れているが、より良いコンテンツ管理を求めている場合。
 
-1. **コンポーネントごとのコンテンツ宣言**  
-   Intlayer のコンテンツ宣言ファイルは、あなたの React コンポーネントと一緒に存在できるため、コンポーネントが移動または削除された場合の「孤立した」翻訳を防ぐことができます。例えば：
+**そのために、Intlayerはreact-intlのアダプターとして実装でき、CLIやCI/CDパイプラインでのJSON翻訳の自動化、翻訳のテストなどを支援します。**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # Intlayer コンテンツ宣言
-               └── index.tsx          # React コンポーネント
-   ```
+このガイドでは、react-intlとの互換性を保ちながら、Intlayerの優れたコンテンツ宣言システムを活用する方法を示します。
 
-2. **集中管理された翻訳**  
-   各コンテンツ宣言ファイルは、コンポーネントが必要とするすべての翻訳を集めます。これは特に TypeScript プロジェクトに役立ちます：欠落した翻訳は **コンパイル時** に検出できます。
+## 目次
 
-3. **自動ビルドと再生成**  
-   翻訳を追加または更新するたびに、Intlayer はメッセージ JSON ファイルを再生成します。次に、これらを react-intl の `<IntlProvider>` に渡すことができます。
+<TOC/>
 
----
+## react-intlとIntlayerをセットアップするステップバイステップガイド
 
-## インストール
+### ステップ1: 依存関係のインストール
 
-通常の React プロジェクトでは、以下のパッケージをインストールします。
+必要なパッケージをインストールします：
 
-```bash
-# npm で
-npm install intlayer react-intl
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-# yarn で
-yarn add intlayer react-intl
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-# pnpm で
-pnpm add intlayer react-intl
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### なぜこれらのパッケージを？
+**パッケージの説明:**
 
-- **intlayer**: コンテンツ宣言をスキャン、マージし、辞書出力を生成するコア CLI とライブラリ。
-- **react-intl**: `<IntlProvider>`、 `<FormattedMessage>`、 `useIntl()` およびその他の国際化の基本的な機能を提供する FormatJS のメインライブラリ。
+- **intlayer**: 国際化管理、コンテンツ宣言、およびビルドのためのコアライブラリ
+- **@intlayer/sync-json-plugin**: Intlayerのコンテンツ宣言をreact-intl互換のJSON形式にエクスポートするプラグイン
 
-> まだ React 自体をインストールしていない場合は、`react` と `react-dom` も必要です。
+### ステップ2: JSONをラップするためのIntlayerプラグインの実装
 
-## Intlayer を設定して react-intl メッセージをエクスポートする
+サポートするロケールを定義するためにIntlayerの設定ファイルを作成します：
 
-プロジェクトのルートに **`intlayer.config.ts`** (または `.js`、 `.mjs`、 `.cjs`) を次のように作成します。
+**react-intl用のJSON辞書もエクスポートしたい場合は、`syncJSON`プラグインを追加してください：**
 
-```typescript title="intlayer.config.ts"
+```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,
   },
-  content: {
-    // Intlayer に react-intl 用のメッセージファイルを生成するよう伝えます
-    dictionaryOutput: ["react-intl"],
-
-    // Intlayer がメッセージ JSON ファイルを書き込むディレクトリ
-    reactIntlMessagesDir: "./react-intl/messages",
-  },
-};
-
-export default config;
-```
-
-> **注**: 他のファイル拡張子（ `.mjs`、 `.cjs`、 `.js`）については、[Intlayer ドキュメント](https://intlayer.org/ja/doc/concept/configuration)を参照してください。
-
----
-
-## Intlayer コンテンツ宣言の作成
-
-Intlayer は、デフォルトで `./src` 内のコードベースをスキャンし、 `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}` に一致するファイルを探します。  
-以下は **TypeScript** の例です：
-
-```typescript title="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const content = {
-  // "key" は react-intl JSON ファイル内のトップレベルメッセージキーになります
-  key: "my-component",
-
-  content: {
-    // t() への各呼び出しは翻訳可能なフィールドを宣言します
-    helloWorld: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
     }),
-    description: t({
-      en: "This is a description",
-      fr: "Ceci est une description",
-      es: "Esta es una descripción",
-    }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
-
-JSON や異なる JS フレーバー（ `.cjs`、 `.mjs`）を好む場合、構造はほぼ同じです, [Intlayer ドキュメントのコンテンツ宣言](https://intlayer.org/ja/doc/concept/content) を参照してください。
-
----
-
-## react-intl メッセージのビルド
-
-**react-intl** の実際のメッセージ JSON ファイルを生成するには、次を実行します。
-
-```bash
-# npm で
-npx intlayer dictionaries build
-
-# yarn で
-yarn intlayer build
-
-# pnpm で
-pnpm intlayer build
-```
-
-これにより、すべての `*.content.*` ファイルがスキャンされ、コンパイルされ、あなたの **`intlayer.config.ts`** の例では、 `./react-intl/messages` に結果が書き込まれます。  
-典型的な出力は次のようになります。
-
-```bash
-.
-└── react-intl
-    └── messages
-        ├── en.json
-        ├── fr.json
-        └── es.json
-```
-
-各ファイルは、 **トップレベルキー** がそれぞれの **`content.key`** に対応する JSON オブジェクトです。 **サブキー**（ `helloWorld` のような）は、該当するコンテンツ項目内で宣言された翻訳を反映しています。
-
-例えば、 **en.json** は次のようになるかもしれません：
-
-```json fileName="react-intl/messages/en/my-component.json"
-{
-  "helloWorld": "Hello World",
-  "description": "This is a description"
-}
-```
-
----
-
-## React アプリにおける react-intl の初期化
-
-### 1. 生成されたメッセージを読み込む
-
-アプリのルートコンポーネントを設定する場所（例： `src/main.tsx` または `src/index.tsx`）では、次を行う必要があります。
-
-1. **生成されたメッセージファイルをインポート** （静的または動的に）。
-2. **それらを `<IntlProvider>` に提供する** `react-intl` から。
-
-簡単なアプローチは、メッセージを **静的に** インポートすることです：
-
-```typescript title="src/index.tsx"
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { IntlProvider } from "react-intl";
-import App from "./App";
-
-// ビルド出力から JSON ファイルをインポートします。
-// または、ユーザーが選んだロケールに基づいて動的にインポートすることもできます。
-import en from "../react-intl/messages/en.json";
-import fr from "../react-intl/messages/fr.json";
-import es from "../react-intl/messages/es.json";
-
-// ユーザーの言語を検出するメカニズムがある場合は、ここで設定します。
-// 簡単のために、英語を選びましょう。
-const locale = "en";
-
-// メッセージをオブジェクトにまとめる（または動的に選択する）
-const messagesRecord: Record<string, Record<string, any>> = {
-  en,
-  fr,
-  es,
+  ],
 };
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <IntlProvider locale={locale} messages={messagesRecord[locale]}>
-      <App />
-    </IntlProvider>
-  </React.StrictMode>
-);
-```
-
-> **ヒント**: 実際のプロジェクトでは、以下のことを行うかもしれません：
->
-> - ランタイムで JSON メッセージを動的に読み込む。
-> - 環境ベース、ブラウザベース、またはユーザーアカウントベースのロケール検出を使用する。
-
-### 2. `<FormattedMessage>` または `useIntl()` を使用する
-
-メッセージが `<IntlProvider>` に読み込まれると、すべての子コンポーネントは react-intl を使用してローカライズされた文字列にアクセスできます。主なアプローチは二つです：
-
-- **`<FormattedMessage>`** コンポーネント
-- **`useIntl()`** フック
-
----
-
-## React コンポーネントでの翻訳の使用
-
-### アプローチ A: `<FormattedMessage>`
-
-インラインでの簡単な使用：
-
-```tsx title="src/components/MyComponent/index.tsx"
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-export default function MyComponent() {
-  return (
-    <div>
-      <h1>
-        {/* “my-component.helloWorld” は en.json、fr.json などのキーを参照します。 */}
-        <FormattedMessage id="my-component.helloWorld" />
-      </h1>
-
-      <p>
-        <FormattedMessage id="my-component.description" />
-      </p>
-    </div>
-  );
-}
+export default config;
 ```
 
-> **`id`** プロパティは、 `<FormattedMessage>` 内で **トップレベルキー**（ `my-component`）およびサブキー（ `helloWorld`）と一致する必要があります。
-
-### アプローチ B: `useIntl()`
-
-より動的な使用のために：
+`syncJSON` プラグインは JSON を自動的にラップします。コンテンツの構造を変更することなく、JSON ファイルの読み書きを行います。
 
-```tsx title="src/components/MyComponent/index.tsx"
-import React from "react";
-import { useIntl } from "react-intl";
+JSON と intlayer のコンテンツ宣言ファイル（`.content` ファイル）を共存させたい場合、Intlayer は以下の手順で処理します：
 
-export default function MyComponent() {
-  const intl = useIntl();
+    1. JSON ファイルとコンテンツ宣言ファイルの両方を読み込み、intlayer の辞書に変換します。
 
-  return (
-    <div>
-      <h1>{intl.formatMessage({ id: "my-component.helloWorld" })}</h1>
-      <p>{intl.formatMessage({ id: "my-component.description" })}</p>
-    </div>
-  );
-}
-```
-
-どちらのアプローチも有効です , アプリに合ったスタイルを選択してください。
+2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。プラグインの優先度やコンテンツ宣言ファイルの優先度に応じて処理されます（すべて設定可能です）。
 
----
+CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
 
-## 翻訳の更新または追加
+`syncJSON`プラグインの詳細については、[syncJSONプラグインのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)をご参照ください。
 
-1. どの `*.content.*` ファイルにでも **コンテンツを追加または修正** します。
-2. `intlayer build` を再実行して、 `./react-intl/messages` 以下の JSON ファイルを再生成します。
-3. React（および react-intl）は、次回アプリケーションを再ビルドまたはリロードする際にアップデートを取得します。
-
----
+## Git設定
 
-## TypeScript 統合（オプション）
+自動生成されたIntlayerファイルは無視することを推奨します：
 
-TypeScript を使用している場合、Intlayer は翻訳のための **型定義** を **生成** できます。
-
-- `tsconfig.json` にあなたが `types` フォルダー（または Intlayer が生成する任意の出力フォルダー）を `"include"` 配列に含めてください。
-
-```json5
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
+```plaintext fileName=".gitignore"
+# Intlayerによって生成されたファイルを無視
+.intlayer
 ```
 
-生成された型は、コンパイル時に React コンポーネント内の欠落した翻訳や無効なキーを検出するのに役立ちます。
+これらのファイルはビルドプロセス中に再生成可能であり、バージョン管理にコミットする必要はありません。
 
----
+### VS Code 拡張機能
 
-## Git 設定
-
-Intlayer の内部ビルドの成果物をバージョン管理から **除外する** ことが一般的です。あなたの `.gitignore` に追加してください：
-
-```plaintext
-# intlayer ビルド成果物を無視する
-.intlayer
-react-intl
-```
+開発者体験を向上させるために、公式の **Intlayer VS Code 拡張機能** をインストールしてください：
 
-あなたのワークフローによっては、 `./react-intl/messages` 内の最終辞書を無視したりコミットしたりしたい場合もあります。もし CI/CD パイプラインがそれらを再生成する場合は、安全に無視できます；さもなければ、プロダクションデプロイメントのためにコミットする必要があります。
+[VS Code Marketplace からインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/ko/intlayer_with_i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-06-29
-title: Intlayer와 i18next
-description: 최적의 국제화를 위해 Intlayer를 i18next와 통합하세요. 두 프레임워크를 비교하고 함께 구성하는 방법을 알아보세요.
+updatedAt: 2025-10-29
+title: Intlayer를 사용하여 i18next JSON 번역 자동화하는 방법
+description: JavaScript 애플리케이션에서 향상된 국제화를 위해 Intlayer와 i18next를 사용하여 JSON 번역을 자동화하세요.
 keywords:
   - Intlayer
   - i18next
@@ -14,149 +14,133 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+  - 마이그레이션
+  - 통합
 slugs:
   - blog
   - intlayer-with-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: syncJSON 플러그인으로 변경
 ---
 
-# 국제화 Intlayer 및 i18next 사용하기
+# Intlayer를 사용하여 i18next JSON 번역 자동화하는 방법
 
-i18next는 JavaScript 응용 프로그램을 위한 오픈 소스 국제화(i18n) 프레임워크입니다. 소프트웨어 프로젝트에서 번역, 지역화 및 언어 전환을 관리하는 데 널리 사용됩니다. 그러나 이는 확장성 및 개발을 복잡하게 만들 수 있는 몇 가지 제한 사항이 있습니다.
+## Intlayer란 무엇인가요?
 
-Intlayer는 이러한 제한 사항을 해결하는 또 다른 국제화 프레임워크로, 콘텐츠 선언 및 관리를 위한 보다 유연한 접근 방식을 제공합니다. i18next와 Intlayer의 주요 차이점을 살펴보고, 최적의 국제화를 위해 두 프레임워크를 구성하는 방법을 알아보겠습니다.
+**Intlayer**는 전통적인 i18n 솔루션의 한계를 극복하기 위해 설계된 혁신적이고 오픈 소스인 국제화 라이브러리입니다. JavaScript 애플리케이션에서 현대적인 콘텐츠 관리를 제공합니다.
 
-## Intlayer와 i18next: 주요 차이점
+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)에서 확인할 수 있습니다.
 
-### 1. 콘텐츠 선언
+## 왜 Intlayer와 i18next를 함께 사용해야 할까요?
 
-i18next의 경우 번역 사전을 특정 폴더에 선언해야 하며, 이는 애플리케이션의 확장성을 복잡하게 만들 수 있습니다. 반면 Intlayer는 컴포넌트와 동일한 디렉토리 내에서 콘텐츠를 선언할 수 있게 해줍니다. 이는 몇 가지 장점을 제공합니다:
+Intlayer는 훌륭한 독립형 i18n 솔루션을 제공하지만(자세한 내용은 [Next.js 통합 가이드](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_with_nextjs_16.md)를 참조), 다음과 같은 여러 이유로 i18next와 함께 사용하고자 할 수 있습니다:
 
-- **간소화된 콘텐츠 편집**: 사용자는 수정할 올바른 사전을 찾을 필요가 없어져 오류 가능성이 줄어듭니다.
-- **자동 적응**: 만약 컴포넌트의 위치가 변경되거나 제거되면, Intlayer는 이를 자동으로 감지하여 적응합니다.
+1. **기존 코드베이스**: 이미 구축된 i18next 구현이 있으며 Intlayer의 향상된 개발자 경험으로 점진적으로 이전하고자 할 때.
+2. **레거시 요구사항**: 프로젝트가 기존 i18next 플러그인 또는 워크플로우와의 호환성을 필요로 할 때.
+3. **팀 친숙도**: 팀이 i18next에 익숙하지만 더 나은 콘텐츠 관리를 원할 때.
 
-### 2. 구성 복잡성
+**이를 위해 Intlayer는 i18next의 어댑터로 구현되어 CLI 또는 CI/CD 파이프라인에서 JSON 번역 자동화, 번역 테스트 등 다양한 작업을 지원할 수 있습니다.**
 
-i18next의 구성은 복잡할 수 있으며, 특히 서버 측 컴포넌트와 통합하거나 Next.js와 같은 프레임워크를 위한 미들웨어를 구성할 때 더욱 그렇습니다. Intlayer는 이 과정을 간소화하여 보다 직관적인 구성을 제공합니다.
+이 가이드는 i18next와의 호환성을 유지하면서 Intlayer의 우수한 콘텐츠 선언 시스템을 활용하는 방법을 보여줍니다.
 
-### 3. 번역 사전의 일관성
+## 목차
 
-i18next에서는 다양한 언어 간에 번역 사전의 일관성을 보장하는 것이 어려울 수 있습니다. 이러한 불일치는 적절히 관리되지 않으면 애플리케이션 충돌로 이어질 수 있습니다. Intlayer는 번역된 콘텐츠에 제약을 설정하여 모든 번역이 누락되지 않고 정확하게 이루어지도록 합니다.
+<TOC/>
 
-### 4. TypeScript 통합
+## i18next와 함께 Intlayer 설정 단계별 가이드
 
-Intlayer는 TypeScript와의 더 나은 통합을 제공하여 코드 내에서 콘텐츠에 대한 자동 제안을 가능하게 하여 개발 효율성을 향상시킵니다.
+### 1단계: 의존성 설치
 
-### 5. 애플리케이션 간 콘텐츠 공유
+필요한 패키지를 설치하세요:
 
-Intlayer는 여러 애플리케이션 및 공유 라이브러리 간에 콘텐츠 선언 파일을 공유하는 것을 용이하게 합니다. 이 기능은 더 큰 코드베이스에 걸쳐 일관된 번역을 유지하는 데 도움이 됩니다.
+```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
+```
 
-## Intlayer로 i18next 사전 생성하기
+**패키지 설명:**
 
-### i18next 사전을 내보내기 위한 Intlayer 구성
+- **intlayer**: 국제화 관리, 콘텐츠 선언 및 빌드를 위한 핵심 라이브러리
+- **@intlayer/sync-json-plugin**: Intlayer 콘텐츠 선언을 i18next 호환 JSON 형식으로 내보내는 플러그인
 
-> 중요 사항
+### 2단계: JSON을 래핑하기 위한 Intlayer 플러그인 구현
 
-> i18next 사전의 내보내기는 현재 베타 버전이며 다른 프레임워크와의 1:1 호환성을 보장하지 않습니다. 문제가 발생하지 않도록 Intlayer 기반 구성의 사용을 권장합니다.
+지원하는 로케일을 정의하기 위해 Intlayer 구성 파일을 만드세요:
 
-i18next 사전을 내보내려면 Intlayer를 적절히 구성해야 합니다. 아래는 Intlayer를 설정하여 Intlayer 및 i18next 사전을 모두 내보내는 방법의 예입니다.
+**i18next용 JSON 사전도 내보내고 싶다면**, `syncJSON` 플러그인을 추가하세요:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
 const config: IntlayerConfig = {
-  content: {
-    // Intlayer가 Intlayer와 i18next 사전을 모두 내보낸다는 것을 나타냅니다.
-    dictionaryOutput: ["intlayer", "i18next"],
-    // i18n 사전이 내보낼 디렉토리까지의 프로젝트 루트에서의 상대 경로
-    i18nextResourcesDir: "./i18next/dictionaries",
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
   },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
+    }),
+  ],
 };
 
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
+`syncJSON` 플러그인은 JSON을 자동으로 래핑합니다. 콘텐츠 구조를 변경하지 않고 JSON 파일을 읽고 씁니다.
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Intlayer가 Intlayer와 i18next 사전을 모두 내보낸다는 것을 나타냅니다.
-    dictionaryOutput: ["intlayer", "i18next"],
-    // i18n 사전이 내보낼 디렉토리까지의 프로젝트 루트에서의 상대 경로
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+만약 JSON과 intlayer 콘텐츠 선언 파일(`.content` 파일)을 공존시키고 싶다면, Intlayer는 다음과 같이 처리합니다:
 
-export default config;
-```
+    1. JSON과 콘텐츠 선언 파일을 모두 로드하여 intlayer 사전(dictionary)으로 변환합니다.
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
+2. JSON과 콘텐츠 선언 파일 간에 충돌이 있을 경우, Intlayer는 모든 사전을 병합하는 과정을 진행합니다. 이는 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 결정되며(모두 구성 가능합니다).
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Intlayer가 Intlayer와 i18next 사전을 모두 내보낸다는 것을 나타냅니다.
-    dictionaryOutput: ["intlayer", "i18next"],
-    // i18n 사전이 내보낼 디렉토리까지의 프로젝트 루트에서의 상대 경로
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+CLI를 사용하여 JSON을 번역하거나 CMS를 통해 변경 사항이 발생하면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
+
+## Git 구성
 
-module.exports = config;
+자동 생성된 Intlayer 파일을 무시하는 것이 권장됩니다:
+
+```plaintext fileName=".gitignore"
+# Intlayer에서 생성된 파일 무시
+.intlayer
 ```
 
-' i18next'를 구성에 포함시킴으로써 Intlayer는 Intlayer 사전과 함께 전용 i18next 사전을 생성합니다. 'intlayer'를 구성에서 제거하면 React-Intlayer 또는 Next-Intlayer와의 호환성이 깨질 수 있습니다.
+이 파일들은 빌드 과정 중에 다시 생성될 수 있으므로 버전 관리에 커밋할 필요가 없습니다.
 
-### i18next 구성으로 사전 가져오기
+### VS Code 확장 프로그램
 
-생성된 사전을 i18next 구성으로 가져오려면 'i18next-resources-to-backend'를 사용할 수 있습니다. 다음은 생성한 i18next 사전을 가져오는 방법의 예입니다.
+개발자 경험을 향상시키기 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+2. JSON과 콘텐츠 선언 파일 간에 충돌이 있는 경우, Intlayer는 모든 사전을 병합하여 처리합니다. 플러그인의 우선순위와 콘텐츠 선언 파일의 우선순위에 따라 달라집니다(모두 구성 가능).
 
-i18next
-  // 여기에 i18next 구성 작성
-  .use(
-    resourcesToBackend(
-      (language: string, namespace: string) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+CLI를 사용하여 JSON을 번역하거나 CMS를 사용하여 변경 사항이 이루어지면, Intlayer는 새로운 번역으로 JSON 파일을 업데이트합니다.
 
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-// i18n/client.mjs
+## Git 구성
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+자동 생성된 Intlayer 파일을 무시하는 것이 권장됩니다:
 
-i18next
-  // 여기에 i18next 구성 작성
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
+```plaintext fileName=".gitignore"
+# Intlayer에서 생성된 파일 무시
+.intlayer
 ```
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+이 파일들은 빌드 과정 중에 다시 생성될 수 있으므로 버전 관리에 커밋할 필요가 없습니다.
 
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
+### VS Code 확장 프로그램
 
-i18next
-  // 여기에 i18next 구성 작성
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+개발자 경험 향상을 위해 공식 **Intlayer VS Code 확장 프로그램**을 설치하세요:
+
+[VS Code 마켓플레이스에서 설치하기](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)