@intlayer/docs 7.0.4-canary.0 → 7.0.5

package/blog/es/intlayer_with_react-intl.md

@@ -1,325 +1,122 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer y react-intl
-description: Integra Intlayer con react-intl para una aplicación React
+updatedAt: 2025-10-29
+title: Cómo automatizar tus traducciones JSON de react-intl usando Intlayer
+description: Automatiza tus traducciones JSON con Intlayer y react-intl para una internacionalización mejorada en aplicaciones React.
 keywords:
   - react-intl
   - Intlayer
   - Internacionalización
-  - Blogumentación
-  - 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) with **react-intl** y Intlayer
+# Cómo automatizar tus traducciones JSON de react-intl usando Intlayer
 
-Esta guía muestra cómo integrar **Intlayer** con **react-intl** para gestionar traducciones en una aplicación React. Declararás tu contenido traducible con Intlayer y luego consumirás esos mensajes con **react-intl**, una biblioteca popular del ecosistema [FormatJS](https://formatjs.io/docs/react-intl).
+## ¿Qué es Intlayer?
 
-## Visión General
+**Intlayer** es una biblioteca innovadora y de código abierto para la internacionalización, diseñada para abordar las limitaciones de las soluciones i18n tradicionales. Ofrece un enfoque moderno para la gestión de contenido en aplicaciones React.
 
-- **Intlayer** te permite almacenar traducciones en archivos de declaración de contenido a **nivel de componente** (JSON, JS, TS, etc.) dentro de tu proyecto.
-- **react-intl** proporciona componentes y hooks de React (como `<FormattedMessage>` y `useIntl()`) para mostrar cadenas localizadas.
+Consulta una comparación concreta con react-intl en nuestro artículo del blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/react-i18next_vs_react-intl_vs_intlayer.md).
 
-Al configurar Intlayer para **exportar** traducciones en un formato **compatible con react-intl**, puedes **generar** y **actualizar** automáticamente los archivos de mensajes que requiere `<IntlProvider>` (de react-intl).
+## ¿Por qué combinar Intlayer con react-intl?
 
----
+Aunque Intlayer proporciona una excelente solución i18n independiente (consulta nuestra [guía de integración con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md)), es posible que desees combinarlo con react-intl por varias razones:
 
-## ¿Por qué usar Intlayer con react-intl?
+1. **Código existente**: Tienes una implementación establecida de react-intl y deseas migrar gradualmente a la mejorada experiencia de desarrollador de Intlayer.
+2. **Requisitos heredados**: Tu proyecto requiere compatibilidad con plugins o flujos de trabajo existentes de react-intl.
+3. **Familiaridad del equipo**: Tu equipo está cómodo con react-intl pero quiere una mejor gestión de contenido.
 
-1. **Declaraciones de Contenido por Componente**  
-   Los archivos de declaración de contenido de Intlayer pueden vivir junto a tus componentes de React, evitando traducciones “huérfanas” si los componentes se mueven o se eliminan. Por ejemplo:
+**Para ello, Intlayer puede implementarse como un adaptador para react-intl que ayude a automatizar tus traducciones JSON en CLI o pipelines CI/CD, probar tus traducciones y más.**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # Declaración de contenido de Intlayer
-               └── index.tsx          # Componente React
-   ```
+Esta guía te muestra cómo aprovechar el sistema superior de declaración de contenido de Intlayer mientras mantienes la compatibilidad con react-intl.
 
-2. **Traducciones Centralizadas**  
-   Cada archivo de declaración de contenido recopila todas las traducciones necesarias para un componente. Esto es particularmente útil en proyectos de TypeScript: las traducciones faltantes se pueden detectar en **tiempo de compilación**.
+## Tabla de Contenidos
 
-3. **Generación Automática y Regeneración**  
-   Siempre que agregues o actualices traducciones, Intlayer regenerará los archivos JSON de mensajes. Luego puedes pasarlos al `<IntlProvider>` de react-intl.
+<TOC/>
 
----
+## Guía paso a paso para configurar Intlayer con react-intl
 
-## Instalación
+### Paso 1: Instalar dependencias
 
-En un proyecto típico de React, instala lo siguiente:
+Instala los paquetes necesarios:
 
-```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
 ```
 
-### ¿Por qué estos paquetes?
+**Descripción de los paquetes:**
 
-- **intlayer**: CLI y biblioteca principal que escanea las declaraciones de contenido, las fusiona y construye salidas de diccionario.
-- **react-intl**: La biblioteca principal de FormatJS que proporciona `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` y otros elementos básicos de internacionalización.
+- **intlayer**: Biblioteca principal para la gestión de internacionalización, declaración de contenido y construcción
+- **@intlayer/sync-json-plugin**: Plugin para exportar declaraciones de contenido de Intlayer a un formato JSON compatible con react-intl
 
-> Si aún no tienes React instalado, también lo necesitarás (`react` y `react-dom`).
+### Paso 2: Implementar el plugin de Intlayer para envolver el JSON
 
-## Configurando Intlayer para Exportar Mensajes react-intl
+Crea un archivo de configuración de Intlayer para definir los locales que soportas:
 
-En la raíz de tu proyecto, crea **`intlayer.config.ts`** (o `.js`, `.mjs`, `.cjs`) de la siguiente manera:
+**Si también quieres exportar diccionarios JSON para react-intl**, añade el 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: {
-    // Agrega tantas locales como desees
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    // Indica a Intlayer que genere archivos de mensajes para react-intl
-    dictionaryOutput: ["react-intl"],
-
-    // El directorio donde Intlayer escribirá tus archivos JSON de mensajes
-    reactIntlMessagesDir: "./react-intl/messages",
-  },
-};
-
-export default config;
-```
-
-> **Nota**: Para otras extensiones de archivo (`.mjs`, `.cjs`, `.js`), consulta la [documentación de Intlayer](https://intlayer.org/es/doc/concept/configuration) para detalles de uso.
-
----
-
-## Creando Tus Declaraciones de Contenido de Intlayer
-
-Intlayer escanea tu base de código (por defecto, bajo `./src`) en busca de archivos que coincidan con `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`.  
-Aquí hay un ejemplo de **TypeScript**:
-
-```typescript title="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const content = {
-  // "key" se convierte en la clave de mensaje de nivel superior en tu archivo JSON de react-intl
-  key: "my-component",
-
-  content: {
-    // Cada llamada a t() declara un campo traducible
-    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;
-```
-
-Si prefieres JSON o diferentes sabores de JS (`.cjs`, `.mjs`), la estructura es en gran medida la misma, consulta [documentación de Intlayer sobre declaración de contenido](https://intlayer.org/es/doc/concept/content).
-
----
-
-## Construyendo los Mensajes de react-intl
-
-Para generar los archivos JSON de mensajes reales para **react-intl**, ejecuta:
-
-```bash
-# con npm
-npx intlayer dictionaries build
-
-# con yarn
-yarn intlayer build
-
-# con pnpm
-pnpm intlayer build
-```
-
-Esto escanea todos los archivos `*.content.*`, los compila y escribe los resultados en el directorio especificado en tu **`intlayer.config.ts`** , en este ejemplo, `./react-intl/messages`.  
-Una salida típica podría verse así:
-
-```bash
-.
-└── react-intl
-    └── messages
-        ├── en.json
-        ├── fr.json
-        └── es.json
-```
-
-Cada archivo es un objeto JSON cuyas **claves de nivel superior** corresponden a cada **`content.key`** de tus declaraciones. Las **sub-claves** (como `helloWorld`) reflejan las traducciones declaradas dentro de ese ítem de contenido.
-
-Por ejemplo, el **en.json** podría verse así:
-
-```json fileName="react-intl/messages/en/my-component.json"
-{
-  "helloWorld": "Hello World",
-  "description": "This is a description"
-}
-```
-
----
-
-## Inicializando react-intl en Tu Aplicación React
-
-### 1. Cargar los Mensajes Generados
-
-Donde configuras el componente raíz de tu aplicación (por ejemplo, `src/main.tsx` o `src/index.tsx`), deberás:
-
-1. **Importar** los archivos de mensajes generados (ya sea de forma estática o dinámica).
-2. **Proveer** estos a `<IntlProvider>` de `react-intl`.
-
-Un enfoque simple es importarlos **estáticamente**:
-
-```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 los archivos JSON de la salida de construcción.
-// Alternativamente, puedes importar dinámicamente según la elección de idioma del usuario.
-import en from "../react-intl/messages/en.json";
-import fr from "../react-intl/messages/fr.json";
-import es from "../react-intl/messages/es.json";
-
-// Si tienes un mecanismo para detectar el idioma del usuario, configúralo aquí.
-// Para simplicidad, elijamos inglés.
-const locale = "en";
-
-// Reúne los mensajes en un objeto (o escógelos dinámicamente)
-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>
-);
-```
-
-> **Consejo**: Para proyectos reales, podrías:
->
-> - Cargar dinámicamente los mensajes JSON en tiempo de ejecución.
-> - Usar detección de local basado en el entorno, navegador o cuenta de usuario.
-
-### 2. Usar `<FormattedMessage>` o `useIntl()`
-
-Una vez que tus mensajes están cargados en `<IntlProvider>`, cualquier componente hijo puede usar react-intl para acceder a cadenas localizadas. Hay dos enfoques principales:
-
-- **Componente `<FormattedMessage>`**
-- **Hook `useIntl()`**
-
----
-
-## Usando Traducciones en Componentes React
-
-### Enfoque A: `<FormattedMessage>`
-
-Para un uso rápido en línea:
-
-```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” se refiere a la clave de en.json, fr.json, etc. */}
-        <FormattedMessage id="my-component.helloWorld" />
-      </h1>
-
-      <p>
-        <FormattedMessage id="my-component.description" />
-      </p>
-    </div>
-  );
-}
-```
-
-> La prop **`id`** en `<FormattedMessage>` debe coincidir con la **clave de nivel superior** (`my-component`) más cualquier sub-clave (`helloWorld`).
-
-### Enfoque B: `useIntl()`
-
-Para un uso más dinámico:
-
-```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;
 ```
 
-Cualquiera de los enfoques es válido: elige el estilo que mejor se adapte a tu aplicación.
-
----
+El plugin `syncJSON` envolverá automáticamente el JSON. Leerá y escribirá los archivos JSON sin cambiar la arquitectura del contenido.
 
-## Actualizando o Agregando Nuevas Traducciones
+Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de Intlayer (`.content`), Intlayer procederá de la siguiente manera:
 
-1. **Agrega o modifica** contenido en cualquier archivo `*.content.*`.
-2. Vuelve a ejecutar `intlayer build` para regenerar los archivos JSON en `./react-intl/messages`.
-3. React (y react-intl) detectarán las actualizaciones la próxima vez que reconstruyas o recargues tu aplicación.
+    1. cargar tanto los archivos JSON como los archivos de declaración de contenido y transformarlos en un diccionario de Intlayer.
+    2. si hay conflictos entre los archivos JSON y los archivos de declaración de contenido, Intlayer procederá a fusionar todos esos diccionarios. Dependiendo de la prioridad de los plugins y la del archivo de declaración de contenido (todos son configurables).
 
----
+Si se realizan cambios usando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
 
-## Integración con TypeScript (Opcional)
+Para ver más detalles sobre el plugin `syncJSON`, por favor consulte la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
 
-Si estás usando TypeScript, Intlayer puede **generar definiciones de tipo** para tus traducciones.
+## Configuración de Git
 
-- Asegúrate de que `tsconfig.json` incluya tu carpeta `types` (o cualquier carpeta de salida que genere Intlayer) en el arreglo `"include"`.
+Se recomienda ignorar los archivos generados automáticamente por Intlayer:
 
-```json5
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
+```plaintext fileName=".gitignore"
+# Ignorar archivos generados por Intlayer
+.intlayer
 ```
 
-Los tipos generados pueden ayudar a detectar traducciones faltantes o claves inválidas en tus componentes de React en tiempo de compilación.
-
----
-
-## Configuración de Git
+Estos archivos pueden ser regenerados durante su proceso de compilación y no necesitan ser comprometidos en el control de versiones.
 
-Es común **excluir** los artefactos de construcción internos de Intlayer del control de versiones. En tu `.gitignore`, añade:
+### Extensión de VS Code
 
-```plaintext
-# Ignorar artefactos de construcción de intlayer
-.intlayer
-react-intl
-```
+Para mejorar la experiencia del desarrollador, instale la **Extensión oficial de Intlayer para VS Code**:
 
-Dependiendo de tu flujo de trabajo, también puede que desees ignorar o confirmar los diccionarios finales en `./react-intl/messages`. Si tu canal de CI/CD los regenera, puedes ignorarlos de forma segura; de lo contrario, confírmales si los necesitas para las implementaciones de producción.
+[Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/fr/intlayer_with_i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-06-29
-title: Intlayer et i18next
-description: Intégrez Intlayer avec i18next pour une internationalisation optimale. Comparez les deux frameworks et apprenez à les configurer ensemble.
+updatedAt: 2025-10-29
+title: Comment automatiser vos traductions JSON i18next avec Intlayer
+description: Automatisez vos traductions JSON avec Intlayer et i18next pour une internationalisation améliorée dans les applications JavaScript.
 keywords:
   - Intlayer
   - i18next
@@ -14,149 +14,111 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+  - Migration
+  - Intégration
 slugs:
   - blog
   - intlayer-with-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Passage au plugin syncJSON
 ---
 
-# Internationalization with Intlayer and i18next
+# Comment automatiser vos traductions JSON i18next avec Intlayer
 
-i18next est un framework open-source d'internationalisation (i18n) conçu pour les applications JavaScript. Il est largement utilisé pour gérer les traductions, la localisation et le changement de langue dans les projets logiciels. Cependant, il a certaines limites qui peuvent compliquer l'évolutivité et le développement.
+## Qu'est-ce que Intlayer ?
 
-Intlayer est un autre framework d'internationalisation qui répond à ces limitations, offrant une approche plus flexible pour la déclaration et la gestion du contenu. Explorons quelques différences clés entre i18next et Intlayer, et comment configurer les deux pour une internationalisation optimale.
+**Intlayer** est une bibliothèque d’internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications JavaScript.
 
-## Intlayer vs. i18next: Différences Clés
+Consultez une comparaison concrète avec i18next dans notre article de blog [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md).
 
-### 1. Déclaration du Contenu
+## Pourquoi combiner Intlayer avec i18next ?
 
-Avec i18next, les dictionnaires de traduction doivent être déclarés dans un dossier spécifique, ce qui peut compliquer l'évolutivité de l'application. En revanche, Intlayer permet de déclarer le contenu dans le même répertoire que votre composant. Cela présente plusieurs avantages :
+Bien qu’Intlayer fournisse une excellente solution i18n autonome (voir notre [guide d’intégration Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_16.md)), vous pourriez vouloir le combiner avec i18next pour plusieurs raisons :
 
-- **Édition de Contenu Simplifiée**: Les utilisateurs n'ont pas à chercher le bon dictionnaire à éditer, réduisant ainsi le risque d'erreurs.
-- **Adaptation Automatique**: Si un composant change de localisation ou est supprimé, Intlayer le détecte et s'adapte automatiquement.
+1. **Base de code existante** : Vous disposez d’une implémentation i18next établie et souhaitez migrer progressivement vers la meilleure expérience développeur d’Intlayer.
+2. **Contraintes héritées** : Votre projet nécessite une compatibilité avec des plugins ou des workflows i18next existants.
+3. **Familiarité de l’équipe** : Votre équipe est à l’aise avec i18next mais souhaite une meilleure gestion du contenu.
 
-### 2. Complexité de Configuration
+**Pour cela, Intlayer peut être implémenté comme un adaptateur pour i18next afin d’automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et plus encore.**
 
-Configurer i18next peut être complexe, surtout lors de l'intégration avec des composants côté serveur ou la configuration de middleware pour des frameworks comme Next.js. Intlayer simplifie ce processus, offrant une configuration plus directe.
+Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d’Intlayer tout en maintenant la compatibilité avec i18next.
 
-### 3. Cohérence des Dictionnaires de Traduction
+## Table des matières
 
-Assurer la cohérence des dictionnaires de traduction à travers différentes langues peut être difficile avec i18next. Cette incohérence peut entraîner des plantages d'application si elle n'est pas correctement gérée. Intlayer y remédie en imposant des contraintes sur le contenu traduit, garantissant qu'aucune traduction ne soit manquée et que le contenu traduit soit précis.
+<TOC/>
 
-### 4. Intégration TypeScript
+## Guide étape par étape pour configurer Intlayer avec i18next
 
-Intlayer offre une meilleure intégration avec TypeScript, permettant des auto-suggestions de contenu dans votre code, améliorant ainsi l'efficacité du développement.
+### Étape 1 : Installer les dépendances
 
-### 5. Partage de Contenu Entre Applications
+Installez les paquets nécessaires :
 
-Intlayer facilite le partage de fichiers de déclaration de contenu entre plusieurs applications et bibliothèques partagées. Cette fonctionnalité rend plus facile le maintien de traductions cohérentes à travers une base de code plus large.
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-## Comment Générer des Dictionnaires i18next avec Intlayer
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-### Configurer Intlayer pour Exporter des Dictionnaires i18next
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
+```
 
-> Notes Importantes
+**Descriptions des paquets :**
 
-> L'exportation des dictionnaires i18next est actuellement en beta et ne garantit pas une compatibilité 1: 1 avec d'autres frameworks. Il est recommandé de s'en tenir à une configuration basée sur Intlayer pour minimiser les problèmes.
+- **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la construction
+- **@intlayer/sync-json-plugin** : Plugin pour exporter les déclarations de contenu Intlayer au format JSON compatible i18next
 
-Pour exporter des dictionnaires i18next, vous devez configurer Intlayer de manière appropriée. Voici un exemple de la façon de configurer Intlayer pour exporter à la fois les dictionnaires Intlayer et i18next.
+### Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
-import { Locales, type IntlayerConfig } from "intlayer";
+Créez un fichier de configuration Intlayer pour définir vos locales supportées :
 
-const config: IntlayerConfig = {
-  content: {
-    // Indiquez qu'Intlayer exportera à la fois les dictionnaires Intlayer et i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Chemin relatif depuis la racine du projet vers le répertoire où les dictionnaires i18n seront exportés
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+**Si vous souhaitez également exporter des dictionnaires JSON pour i18next**, ajoutez le plugin `syncJSON` :
 
-export default config;
-```
-
-```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: {
-    // Indiquez qu'Intlayer exportera à la fois les dictionnaires Intlayer et i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Chemin relatif depuis la racine du projet vers le répertoire où les dictionnaires i18n seront exportés
-    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");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Indiquez qu'Intlayer exportera à la fois les dictionnaires Intlayer et i18next
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Chemin relatif depuis la racine du projet vers le répertoire où les dictionnaires i18n seront exportés
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
-
-module.exports = config;
-```
+Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans modifier l'architecture du contenu.
 
-En incluant 'i18next' dans la configuration, Intlayer génère des dictionnaires i18next dédiés en plus des dictionnaires Intlayer. Notez que le fait de retirer 'intlayer' de la configuration peut provoquer des problèmes de compatibilité avec React-Intlayer ou Next-Intlayer.
+Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu intlayer (`.content`), Intlayer procédera de la manière suivante :
 
-### Importer des Dictionnaires dans Votre Configuration i18next
+    1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire intlayer.
+    2. s'il y a des conflits entre les fichiers JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle du fichier de déclaration de contenu (tout est configurable).
 
-Pour importer les dictionnaires générés dans votre configuration i18next, vous pouvez utiliser 'i18next-resources-to-backend'. Voici un exemple de la façon d'importer vos dictionnaires i18next :
+Si des modifications sont effectuées via la CLI pour traduire le JSON, ou en utilisant le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+## Configuration Git
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+Il est recommandé d'ignorer les fichiers Intlayer générés automatiquement :
 
-i18next
-  // Votre configuration i18next
-  .use(
-    resourcesToBackend(
-      (language: string, namespace: string) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
+```plaintext fileName=".gitignore"
+# Ignorer les fichiers générés par Intlayer
+.intlayer
 ```
 
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-// i18n/client.mjs
-
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+Ces fichiers peuvent être régénérés lors de votre processus de build et n'ont pas besoin d'être commités dans le contrôle de version.
 
-i18next
-  // Votre configuration i18next
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+### Extension VS Code
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+Pour une meilleure expérience développeur, installez l'extension officielle **Intlayer VS Code Extension** :
 
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
-
-i18next
-  // Votre configuration i18next
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+[Installer depuis le Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)