@intlayer/docs 7.0.4-canary.0 → 7.0.4

package/blog/it/intlayer_with_react-intl.md

@@ -1,325 +1,122 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer e react-intl
-description: Integra Intlayer con react-intl per un'app React
+updatedAt: 2025-10-29
+title: Come automatizzare le traduzioni JSON di react-intl usando Intlayer
+description: Automatizza le tue traduzioni JSON con Intlayer e react-intl per una migliore internazionalizzazione nelle applicazioni React.
 keywords:
   - react-intl
   - Intlayer
   - Internazionalizzazione
-  - Blogumentazione
-  - Next.js
+  - Blog
+  - i18n
   - JavaScript
   - React
+  - FormatJS
 slugs:
   - blog
   - intlayer-with-react-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Cambio al plugin syncJSON
 ---
 
-# React Internationalization (i18n) con **react-intl** e Intlayer
+# Come automatizzare le traduzioni JSON di react-intl usando Intlayer
 
-Questa guida mostra come integrare **Intlayer** con **react-intl** per gestire le traduzioni in un'applicazione React. Dichiari i tuoi contenuti traducibili con Intlayer e poi consuma quei messaggi con **react-intl**, una popolare libreria dell'ecosistema [FormatJS](https://formatjs.io/docs/react-intl).
+## Cos'è Intlayer?
 
-## Panoramica
+**Intlayer** è una libreria di internazionalizzazione innovativa e open-source progettata per superare le limitazioni delle soluzioni i18n tradizionali. Offre un approccio moderno alla gestione dei contenuti nelle applicazioni React.
 
-- **Intlayer** ti consente di memorizzare le traduzioni nei file di dichiarazione dei contenuti a **livello di componente** (JSON, JS, TS, ecc.) all'interno del tuo progetto.
-- **react-intl** fornisce componenti React e hook (come `<FormattedMessage>` e `useIntl()`) per visualizzare stringhe localizzate.
+Consulta un confronto concreto con react-intl nel nostro post del blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/it/react-i18next_vs_react-intl_vs_intlayer.md).
 
-Configurando Intlayer per **esportare** le traduzioni in un formato **compatibile con react-intl**, puoi automaticamente **generare** e **aggiornare** i file di messaggi di cui `<IntlProvider>` (da react-intl) ha bisogno.
+## Perché combinare Intlayer con react-intl?
 
----
+Sebbene Intlayer fornisca una soluzione i18n autonoma eccellente (vedi la nostra [guida all'integrazione con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_with_vite+react.md)), potresti volerlo combinare con react-intl per diversi motivi:
 
-## Perché usare Intlayer con react-intl?
+1. **Codice esistente**: Hai un'implementazione consolidata di react-intl e vuoi migrare gradualmente alla migliore esperienza sviluppatore offerta da Intlayer.
+2. **Requisiti legacy**: Il tuo progetto richiede compatibilità con plugin o flussi di lavoro esistenti di react-intl.
+3. **Familiarità del team**: Il tuo team è abituato a react-intl ma desidera una migliore gestione dei contenuti.
 
-1. **Dichiarazioni di contenuto per componente**  
-   I file di dichiarazione dei contenuti di Intlayer possono vivere accanto ai tuoi componenti React, evitando traduzioni “orfane” se i componenti vengono spostati o rimossi. Ad esempio:
+**Per questo, Intlayer può essere implementato come un adattatore per react-intl per aiutarti ad automatizzare le traduzioni JSON nella CLI o nelle pipeline CI/CD, testare le traduzioni e altro ancora.**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # Dichiarazione contenuti Intlayer
-               └── index.tsx          # Componente React
-   ```
+Questa guida ti mostra come sfruttare il sistema superiore di dichiarazione dei contenuti di Intlayer mantenendo la compatibilità con react-intl.
 
-2. **Traduzioni centralizzate**  
-   Ogni file di dichiarazione dei contenuti raccoglie tutte le traduzioni necessarie a un componente. Questo è particolarmente utile nei progetti TypeScript: le traduzioni mancanti possono essere catturate al **momento della compilazione**.
+## Indice
 
-3. **Build e rigenerazione automatiche**  
-   Ogni volta che aggiungi o aggiorni le traduzioni, Intlayer rigenera file JSON di messaggio. Puoi quindi passarli a `<IntlProvider>` di react-intl.
+<TOC/>
 
----
+## Guida passo-passo per configurare Intlayer con react-intl
 
-## Installazione
+### Passo 1: Installa le dipendenze
 
-In un tipico progetto React, installa i seguenti:
+Installa i pacchetti necessari:
 
-```bash
-# con npm
-npm install intlayer react-intl
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-# con yarn
-yarn add intlayer react-intl
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-# con pnpm
-pnpm add intlayer react-intl
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### Perché questi pacchetti?
+**Descrizione dei pacchetti:**
 
-- **intlayer**: CLI core e libreria che scansiona le dichiarazioni di contenuto, le unisce e genera output di dizionario.
-- **react-intl**: La libreria principale di FormatJS che fornisce `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` e altre primitives di internazionalizzazione.
+- **intlayer**: Libreria core per la gestione dell'internazionalizzazione, dichiarazione dei contenuti e build
+- **@intlayer/sync-json-plugin**: Plugin per esportare le dichiarazioni di contenuto di Intlayer in formato JSON compatibile con react-intl
 
-> Se non hai già installato React, avrai bisogno anche di esso (`react` e `react-dom`).
+### Passo 2: Implementa il plugin Intlayer per incapsulare il JSON
 
-## Configurare Intlayer per esportare i messaggi react-intl
+Crea un file di configurazione Intlayer per definire le tue localizzazioni supportate:
 
-Nella radice del tuo progetto, crea **`intlayer.config.ts`** (o `.js`, `.mjs`, `.cjs`) in questo modo:
+**Se vuoi anche esportare dizionari JSON per react-intl**, aggiungi il plugin `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: {
-    // Aggiungi quanti più locali desideri
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    // Indica a Intlayer di generare file di messaggi per react-intl
-    dictionaryOutput: ["react-intl"],
-
-    // La directory in cui Intlayer scriverà i tuoi file JSON di messaggi
-    reactIntlMessagesDir: "./react-intl/messages",
-  },
-};
-
-export default config;
-```
-
-> **Nota**: Per altri tipi di file (`.mjs`, `.cjs`, `.js`), consulta la [documentazione di Intlayer](https://intlayer.org/it/doc/concept/configuration) per i dettagli sull'uso.
-
----
-
-## Creazione delle dichiarazioni di contenuto di Intlayer
-
-Intlayer scansiona il tuo codice sorgente (per impostazione predefinita, sotto `./src`) per file che corrispondono a `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`.  
-Ecco un esempio in **TypeScript**:
-
-```typescript title="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const content = {
-  // "chiave" diventa la chiave di messaggio di primo livello nel tuo file JSON react-intl
-  key: "my-component",
-
-  content: {
-    // Ogni chiamata a t() dichiara un campo traducibile
-    helloWorld: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-    description: t({
-      en: "This is a description",
-      fr: "Ceci est une description",
-      es: "Esta es una descripción",
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
     }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
-
-Se preferisci JSON o diversi tipi di JS (`.cjs`, `.mjs`), la struttura è essenzialmente la stessa, vedi [documentazione di Intlayer sulla dichiarazione dei contenuti](https://intlayer.org/it/doc/concept/content).
-
----
-
-## Costruzione dei messaggi react-intl
-
-Per generare i file JSON di messaggi effettivi per **react-intl**, esegui:
-
-```bash
-# con npm
-npx intlayer dictionaries build
-
-# con yarn
-yarn intlayer build
-
-# con pnpm
-pnpm intlayer build
-```
-
-Questo scansiona tutti i file `*.content.*`, li compila e scrive i risultati nella directory specificata nel tuo **`intlayer.config.ts`** , in questo esempio, `./react-intl/messages`.  
-Un output tipico potrebbe apparire così:
-
-```bash
-.
-└── react-intl
-    └── messages
-        ├── en.json
-        ├── fr.json
-        └── es.json
-```
-
-Ogni file è un oggetto JSON i cui **chiavi di primo livello** corrispondono a ciascuna **`content.key`** dalle tue dichiarazioni. Le **sotto-chiavi** (come `helloWorld`) riflettono le traduzioni dichiarate all'interno di quell'elemento di contenuto.
-
-Ad esempio, il **en.json** potrebbe apparire così:
-
-```json fileName="react-intl/messages/en/my-component.json"
-{
-  "helloWorld": "Hello World",
-  "description": "This is a description"
-}
-```
-
----
-
-## Inizializzare react-intl nella tua app React
-
-### 1. Carica i messaggi generati
-
-Dove configuri il componente radice della tua app (ad esempio, `src/main.tsx` o `src/index.tsx`), dovrai:
-
-1. **Importare** i file di messaggi generati (staticamente o dinamicamente).
-2. **Fornirli** a `<IntlProvider>` da `react-intl`.
-
-Un approccio semplice è importare staticamente:
-
-```typescript title="src/index.tsx"
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { IntlProvider } from "react-intl";
-import App from "./App";
-
-// Importa i file JSON dall'output della build.
-// In alternativa, puoi importare dinamicamente in base alla lingua scelta dall'utente.
-import en from "../react-intl/messages/en.json";
-import fr from "../react-intl/messages/fr.json";
-import es from "../react-intl/messages/es.json";
-
-// Se hai un meccanismo per rilevare la lingua dell'utente, impostalo qui.
-// Per semplicità, scegliamo l'inglese.
-const locale = "en";
-
-// Raccogli i messaggi in un oggetto (o scegli in modo dinamico)
-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>
-);
-```
-
-> **Suggerimento**: Per progetti reali, potresti:
->
-> - Caricare dinamicamente i messaggi JSON a runtime.
-> - Utilizzare rilevamenti di locale basati su ambiente, browser o account utente.
-
-### 2. Usa `<FormattedMessage>` o `useIntl()`
-
-Una volta che i tuoi messaggi sono stati caricati in `<IntlProvider>`, qualsiasi componente figlio può utilizzare react-intl per accedere a stringhe localizzate. Ci sono due approcci principali:
-
-- **Componente `<FormattedMessage>`**
-- **Hook `useIntl()`**
-
----
-
-## Utilizzo delle traduzioni nei componenti React
-
-### Approccio A: `<FormattedMessage>`
-
-Per un utilizzo rapido in linea:
-
-```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” fa riferimento alla chiave da en.json, fr.json, ecc. */}
-        <FormattedMessage id="my-component.helloWorld" />
-      </h1>
-
-      <p>
-        <FormattedMessage id="my-component.description" />
-      </p>
-    </div>
-  );
-}
-```
-
-> La prop **`id`** in `<FormattedMessage>` deve corrispondere alla **chiave di primo livello** (`my-component`) più eventuali sotto-chiavi (`helloWorld`).
-
-### Approccio B: `useIntl()`
-
-Per un utilizzo più dinamico:
-
-```tsx title="src/components/MyComponent/index.tsx"
-import React from "react";
-import { useIntl } from "react-intl";
-
-export default function MyComponent() {
-  const intl = useIntl();
-
-  return (
-    <div>
-      <h1>{intl.formatMessage({ id: "my-component.helloWorld" })}</h1>
-      <p>{intl.formatMessage({ id: "my-component.description" })}</p>
-    </div>
-  );
-}
+export default config;
 ```
 
-Entrambi gli approcci sono validi: scegli quello che meglio si adatta alla tua app.
-
----
+Il plugin `syncJSON` incapsulerà automaticamente il JSON. Leggerà e scriverà i file JSON senza modificare l'architettura del contenuto.
 
-## Aggiornamento o aggiunta di nuove traduzioni
+Se vuoi far coesistere quel JSON con i file di dichiarazione dei contenuti di Intlayer (file `.content`), Intlayer procederà in questo modo:
 
-1. **Aggiungi o modifica** contenuti in qualsiasi file `*.content.*`.
-2. Riesegui `intlayer build` per rigenerare i file JSON sotto `./react-intl/messages`.
-3. React (e react-intl) rileveranno gli aggiornamenti la prossima volta che ricompili o ricarichi la tua applicazione.
+    1. caricherà sia i file JSON che quelli di dichiarazione dei contenuti e li trasformerà in un dizionario Intlayer.
+    2. se ci sono conflitti tra i file JSON e i file di dichiarazione del contenuto, Intlayer procederà alla fusione di tutti questi dizionari. A seconda della priorità dei plugin e di quella del file di dichiarazione del contenuto (tutti configurabili).
 
----
+Se vengono apportate modifiche utilizzando la CLI per tradurre il JSON, o utilizzando il CMS, Intlayer aggiornerà il file JSON con le nuove traduzioni.
 
-## Integrazione TypeScript (Opzionale)
+Per maggiori dettagli sul plugin `syncJSON`, si prega di fare riferimento alla [documentazione del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/plugins/sync-json.md).
 
-Se stai usando TypeScript, Intlayer può **generare definizioni di tipo** per le tue traduzioni.
+## Configurazione Git
 
-- Assicurati che `tsconfig.json` includa la tua cartella `types` (o qualsiasi altra cartella di output generata da Intlayer) nell'array `"include"`.
+Si consiglia di ignorare i file Intlayer generati automaticamente:
 
-```json5
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
+```plaintext fileName=".gitignore"
+# Ignora i file generati da Intlayer
+.intlayer
 ```
 
-I tipi generati possono aiutare a rilevare traduzioni mancanti o chiavi non valide nei tuoi componenti React al momento della compilazione.
-
----
-
-## Configurazione Git
+Questi file possono essere rigenerati durante il processo di build e non è necessario che vengano inseriti nel controllo di versione.
 
-È comune **escludere** gli artefatti di build interni di Intlayer dal controllo versione. Nel tuo `.gitignore`, aggiungi:
+### Estensione VS Code
 
-```plaintext
-# Ignora gli artefatti di build di intlayer
-.intlayer
-react-intl
-```
+Per migliorare l'esperienza dello sviluppatore, installa l'**Estensione ufficiale Intlayer per VS Code**:
 
-A seconda del tuo flusso di lavoro, potresti anche voler ignorare o impegnare i dizionari finali in `./react-intl/messages`. Se la tua pipeline CI/CD li rigenera, puoi ignorarli in sicurezza; altrimenti, impegnali se hai bisogno di loro per le distribuzioni in produzione.
+[Installa dal Marketplace di VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/ja/intlayer_with_i18next.md

@@ -1,162 +1,127 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-06-29
-title: IntlayerとI18next
-description: 最適な国際化のためにIntlayerをi18nextと統合します。両フレームワークを比較し、それらを一緒に設定する方法を学びます。
+updatedAt: 2025-10-29
+title: Intlayerを使ってi18nextのJSON翻訳を自動化する方法
+description: Intlayerとi18nextを使ってJavaScriptアプリケーションの国際化を強化するためにJSON翻訳を自動化する方法。
 keywords:
   - Intlayer
   - i18next
   - 国際化
   - i18n
-  - ローカライゼーション
+  - ローカリゼーション
   - 翻訳
   - React
   - Next.js
   - JavaScript
   - TypeScript
+  - マイグレーション
+  - 統合
 slugs:
   - blog
   - intlayer-with-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: syncJSONプラグインへの変更
 ---
 
-# Internationalization with Intlayer and i18next
+# Intlayerを使ってi18nextのJSON翻訳を自動化する方法
 
-i18nextは、JavaScriptアプリケーション向けに設計されたオープンソースの国際化（i18n）フレームワークです。これは、ソフトウェアプロジェクトにおける翻訳、ローカライズ、および言語切り替えの管理に広く使用されています。ただし、スケーラビリティや開発を複雑にするいくつかの制限があります。
+## Intlayerとは何ですか？
 
-Intlayerは、これらの制限に対処する別の国際化フレームワークであり、コンテンツの宣言と管理により柔軟なアプローチを提供します。i18nextとIntlayerの間のいくつかの主要な違いと、両方を最適な国際化のために設定する方法について探ってみましょう。
+**Intlayer**は、従来のi18nソリューションの欠点を解決するために設計された革新的なオープンソースの国際化ライブラリです。JavaScriptアプリケーションにおけるコンテンツ管理に対して、モダンなアプローチを提供します。
 
-## Intlayer vs. i18next: 主な違い
+具体的な比較については、当社のブログ記事[Next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ja/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/ja/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との統合
+## Intlayerとi18nextをセットアップするステップバイステップガイド
 
-IntlayerはTypeScriptとの統合が良好で、コード内のコンテンツの自動提案を可能にし、開発効率を向上させます。
+### ステップ1: 依存関係のインストール
 
-### 5. アプリケーション間でのコンテンツの共有
+必要なパッケージをインストールします：
 
-Intlayerは、複数のアプリケーションおよび共有ライブラリ間でのコンテンツ宣言ファイルの共有を容易にします。この機能により、より大規模なコードベース全体で一貫した翻訳を維持することが容易になります。
-
-## Intlayerでi18next辞書を生成する方法
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-### i18next辞書をエクスポートするためのIntlayerの設定
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-> 重要な注意事項
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
 
-> i18next辞書のエクスポートは現在ベータ版であり、他のフレームワークとの1:1の互換性を保証しません。問題を最小限に抑えるために、Intlayerに基づいた設定を維持することをお勧めします。
+**パッケージの説明:**
 
-i18next辞書をエクスポートするには、Intlayerを適切に設定する必要があります。以下に、Intlayerを設定してIntlayerとi18next辞書の両方をエクスポートする方法の例を示します。
+- **intlayer**: 国際化管理、コンテンツ宣言、およびビルドのためのコアライブラリ
+- **@intlayer/sync-json-plugin**: Intlayerのコンテンツ宣言をi18next互換のJSON形式にエクスポートするプラグイン
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import { Locales, type IntlayerConfig } from "intlayer";
+### ステップ2: JSONをラップするためのIntlayerプラグインの実装
 
-const config: IntlayerConfig = {
-  content: {
-    // IntlayerがIntlayerとi18nextの辞書の両方をエクスポートすることを示します
-    dictionaryOutput: ["intlayer", "i18next"],
-    // プロジェクトルートからi18n辞書がエクスポートされるディレクトリまでの相対パス
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+サポートするロケールを定義するためにIntlayerの設定ファイルを作成します：
 
-export default config;
-```
+**i18next用のJSON辞書もエクスポートしたい場合は、`syncJSON`プラグインを追加してください：**
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // IntlayerがIntlayerとi18nextの辞書の両方をエクスポートすることを示します
-    dictionaryOutput: ["intlayer", "i18next"],
-    // プロジェクトルートからi18n辞書がエクスポートされるディレクトリまでの相対パス
-    i18nextResourcesDir: "./i18next/dictionaries",
+const config: IntlayerConfig = {
+  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.cjs" codeFormat="commonjs"
-const { Locales } = require("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は以下の手順で処理します：
 
-module.exports = config;
-```
+    1. JSONファイルとコンテンツ宣言ファイルの両方を読み込み、intlayerの辞書に変換します。
 
-設定に'i18next'を含めることで、IntlayerはIntlayer辞書に加えて専用のi18next辞書を生成します。設定から'intlayer'を削除すると、React-IntlayerやNext-Intlayerとの互換性に問題が生じる場合があります。
+2. JSONとコンテンツ宣言ファイル間に競合がある場合、Intlayerはすべての辞書をマージします。プラグインの優先度およびコンテンツ宣言ファイルの優先度に応じて処理されます（すべて設定可能です）。
 
-### i18next設定に辞書をインポートする
+CLIを使用してJSONの翻訳を行った場合やCMSを使用した場合、Intlayerは新しい翻訳でJSONファイルを更新します。
 
-生成された辞書をi18nextの設定にインポートするには、'i18next-resources-to-backend'を使用できます。以下は、i18next辞書をインポートする方法の例です。
+## Git設定
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+自動生成されたIntlayerファイルは無視することを推奨します：
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
-
-i18next
-  // あなたのi18next設定
-  .use(
-    resourcesToBackend(
-      (language: string, namespace: string) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
+```plaintext fileName=".gitignore"
+# Intlayerによって生成されたファイルを無視
+.intlayer
 ```
 
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-// i18n/client.mjs
-
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+これらのファイルはビルドプロセス中に再生成可能であり、バージョン管理にコミットする必要はありません。
 
-i18next
-  // あなたのi18next設定
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+### VS Code拡張機能
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+開発者体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールしてください：
 
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
+[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-i18next
-  // あなたのi18next設定
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)