@intlayer/docs 7.0.3 → 7.0.4

package/blog/fr/intlayer_with_react-intl.md

@@ -1,325 +1,122 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer et react-intl
-description: Intégrez Intlayer avec react-intl pour une application React
+updatedAt: 2025-10-29
+title: Comment automatiser vos traductions JSON react-intl avec Intlayer
+description: Automatisez vos traductions JSON avec Intlayer et react-intl pour une internationalisation améliorée dans les applications React.
 keywords:
   - react-intl
   - Intlayer
   - Internationalisation
   - Blog
-  - Next.js
+  - i18n
   - JavaScript
   - React
+  - FormatJS
 slugs:
   - blog
   - intlayer-with-react-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Passage au plugin syncJSON
 ---
 
-# Internationalisation React (i18n) avec **react-intl** et Intlayer
+# Comment automatiser vos traductions JSON react-intl avec Intlayer
 
-Ce guide montre comment intégrer **Intlayer** avec **react-intl** pour gérer les traductions dans une application React. Vous déclarerez votre contenu traduisible avec Intlayer, puis consommerez ces messages avec **react-intl**, une bibliothèque populaire de l'écosystème [FormatJS](https://formatjs.io/docs/react-intl).
+## Qu'est-ce que Intlayer ?
 
-## Vue d'ensemble
+**Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle propose une approche moderne de la gestion de contenu dans les applications React.
 
-- **Intlayer** vous permet de stocker des traductions dans des fichiers de déclaration de contenu **au niveau des composants** (JSON, JS, TS, etc.) au sein de votre projet.
-- **react-intl** fournit des composants React et des hooks (comme `<FormattedMessage>` et `useIntl()`) pour afficher des chaînes localisées.
+Consultez une comparaison concrète avec react-intl dans notre article de blog [react-i18next vs. react-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md).
 
-En configurant Intlayer pour **exporter** des traductions dans un format **compatible avec react-intl**, vous pouvez automatiquement **générer** et **mettre à jour** les fichiers de messages que `<IntlProvider>` (de react-intl) exige.
+## Pourquoi combiner Intlayer avec react-intl ?
 
----
+Bien qu'Intlayer offre une excellente solution i18n autonome (voir notre [guide d'intégration React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md)), vous pourriez vouloir le combiner avec react-intl pour plusieurs raisons :
 
-## Pourquoi utiliser Intlayer avec react-intl ?
+1. **Code existant** : Vous disposez d'une implémentation react-intl é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 les plugins ou workflows react-intl existants.
+3. **Familiarité de l'équipe** : Votre équipe est à l'aise avec react-intl mais souhaite une meilleure gestion du contenu.
 
-1. **Déclarations de contenu par composant**  
-   Les fichiers de déclaration de contenu d'Intlayer peuvent coexister avec vos composants React, empêchant les traductions « orphelines » si des composants sont déplacés ou supprimés. Par exemple :
+**Pour cela, Intlayer peut être implémenté comme un adaptateur pour react-intl afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et plus encore.**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # Déclaration de contenu d'Intlayer
-               └── index.tsx          # Composant React
-   ```
+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 react-intl.
 
-2. **Traductions centralisées**  
-   Chaque fichier de déclaration de contenu collecte toutes les traductions nécessaires pour un composant. C'est particulièrement utile dans les projets TypeScript : les traductions manquantes peuvent être détectées à **l'heure de la compilation**.
+## Table des matières
 
-3. **Construction et régénération automatiques**  
-   Chaque fois que vous ajoutez ou mettez à jour des traductions, Intlayer régénère les fichiers JSON de messages. Vous pouvez ensuite les passer dans le `<IntlProvider>` de react-intl.
+<TOC/>
 
----
+## Guide étape par étape pour configurer Intlayer avec react-intl
 
-## Installation
+### Étape 1 : Installer les dépendances
 
-Dans un projet React typique, installez les éléments suivants :
+Installez les paquets nécessaires :
 
-```bash
-# avec npm
-npm install intlayer react-intl
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-# avec yarn
-yarn add intlayer react-intl
+```bash packageManager="pnpm"
+pnpm add intlayer @intlayer/sync-json-plugin
+```
 
-# avec pnpm
-pnpm add intlayer react-intl
+```bash packageManager="yarn"
+yarn add intlayer @intlayer/sync-json-plugin
 ```
 
-### Pourquoi ces paquets ?
+**Descriptions des paquets :**
 
-- **intlayer** : CLI et bibliothèque de base qui recherche des déclarations de contenu, les fusionne et construit des sorties de dictionnaire.
-- **react-intl** : La bibliothèque principale de FormatJS qui fournit `<IntlProvider>`, `<FormattedMessage>`, `useIntl()` et d'autres primitives d'internationalisation.
+- **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la compilation
+- **@intlayer/sync-json-plugin** : Plugin pour exporter les déclarations de contenu Intlayer au format JSON compatible react-intl
 
-> Si vous n'avez pas déjà installé React lui-même, vous en aurez également besoin (`react` et `react-dom`).
+### Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON
 
-## Configuration d'Intlayer pour exporter les messages react-intl
+Créez un fichier de configuration Intlayer pour définir vos locales supportées :
 
-Dans le répertoire racine de votre projet, créez **`intlayer.config.ts`** (ou `.js`, `.mjs`, `.cjs`) comme suit :
+**Si vous souhaitez également exporter des dictionnaires JSON pour react-intl**, ajoutez le 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: {
-    // Ajoutez autant de locales que vous le souhaitez
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
     defaultLocale: Locales.ENGLISH,
   },
-  content: {
-    // Indique à Intlayer de générer des fichiers de messages pour react-intl
-    dictionaryOutput: ["react-intl"],
-
-    // Le répertoire où Intlayer écrira vos fichiers JSON de messages
-    reactIntlMessagesDir: "./react-intl/messages",
-  },
-};
-
-export default config;
-```
-
-> **Remarque** : Pour d'autres extensions de fichiers (`.mjs`, `.cjs`, `.js`), consultez la [documentation d'Intlayer](https://intlayer.org/fr/doc/concept/configuration) pour des détails d'utilisation.
-
----
-
-## Création de vos déclarations de contenu Intlayer
-
-Intlayer parcourt votre base de code (par défaut, sous `./src`) à la recherche de fichiers correspondant à `*.content.{ts,tsx,js,jsx,mjs,mjx,cjs,cjx,json}`.  
-Voici un exemple **TypeScript** :
-
-```typescript title="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const content = {
-  // "key" devient la clé de message de niveau supérieur dans votre fichier JSON de react-intl
-  key: "my-component",
-
-  content: {
-    // Chaque appel à t() déclare un champ traduisible
-    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 vous préférez JSON ou différentes variantes JS (`.cjs`, `.mjs`), la structure est essentiellement la même, voir [les docs Intlayer sur la déclaration de contenu](https://intlayer.org/fr/doc/concept/content).
-
----
-
-## Génération des messages react-intl
-
-Pour générer les fichiers JSON de messages réels pour **react-intl**, exécutez :
-
-```bash
-# avec npm
-npx intlayer dictionaries build
-
-# avec yarn
-yarn intlayer build
-
-# avec pnpm
-pnpm intlayer build
-```
-
-Cela parcourt tous les fichiers `*.content.*`, les compile et écrit les résultats dans le répertoire spécifié dans votre **`intlayer.config.ts`** , dans cet exemple, `./react-intl/messages`.  
-Une sortie typique pourrait ressembler à ceci :
-
-```bash
-.
-└── react-intl
-    └── messages
-        ├── en.json
-        ├── fr.json
-        └── es.json
-```
-
-Chaque fichier est un objet JSON dont les **clés de niveau supérieur** correspondent à chaque **`content.key`** de vos déclarations. Les **sous-clés** (comme `helloWorld`) reflètent les traductions déclarées dans cet élément de contenu.
-
-Par exemple, le **en.json** pourrait ressembler à :
-
-```json fileName="react-intl/messages/en/my-component.json"
-{
-  "helloWorld": "Hello World",
-  "description": "This is a description"
-}
-```
-
----
-
-## Initialisation de react-intl dans votre application React
-
-### 1. Charger les messages générés
-
-À l'endroit où vous configurez le composant racine de votre application (par exemple, `src/main.tsx` ou `src/index.tsx`), vous devrez :
-
-1. **Importer** les fichiers de messages générés (soit statiquement soit dynamiquement).
-2. **Les fournir** au `<IntlProvider>` de `react-intl`.
-
-Une approche simple consiste à les importer **statiquement** :
-
-```typescript title="src/index.tsx"
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { IntlProvider } from "react-intl";
-import App from "./App";
-
-// Importez les fichiers JSON de la sortie de construction.
-// Alternativement, vous pouvez les importer dynamiquement en fonction de la langue choisie par l'utilisateur.
-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 vous avez un mécanisme pour détecter la langue de l'utilisateur, définissez-la ici.
-// Pour simplifier, choisissons l'anglais.
-const locale = "en";
-
-// Rassemblez les messages dans un objet (ou choisissez-les dynamiquement)
-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>
-);
-```
-
-> **Astuce** : Pour de vrais projets, vous pourriez :
->
-> - Charger dynamiquement les messages JSON au moment de l'exécution.
-> - Utiliser une détection de locale basée sur l'environnement, le navigateur ou le compte utilisateur.
-
-### 2. Utiliser `<FormattedMessage>` ou `useIntl()`
-
-Une fois vos messages chargés dans `<IntlProvider>`, n'importe quel composant enfant peut utiliser react-intl pour accéder à des chaînes localisées. Il existe deux principales approches :
-
-- **Le composant `<FormattedMessage>`**
-- **Le hook `useIntl()`**
-
----
-
-## Utilisation des traductions dans les composants React
-
-### Approche A : `<FormattedMessage>`
-
-Pour une utilisation rapide en ligne :
-
-```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” fait référence à la clé du fichier en.json, fr.json, etc. */}
-        <FormattedMessage id="my-component.helloWorld" />
-      </h1>
-
-      <p>
-        <FormattedMessage id="my-component.description" />
-      </p>
-    </div>
-  );
-}
-```
-
-> La prop **`id`** dans `<FormattedMessage>` doit correspondre à la **clé de niveau supérieur** (`my-component`) plus toutes les sous-clés (`helloWorld`).
-
-### Approche B : `useIntl()`
-
-Pour une utilisation plus dynamique :
-
-```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;
 ```
 
-Les deux approches sont valides : choisissez le style qui convient le mieux à votre application.
-
----
+Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans modifier l'architecture du contenu.
 
-## Mise à jour ou ajout de nouvelles traductions
+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 :
 
-1. **Ajouter ou modifier** du contenu dans n'importe quel fichier `*.content.*`.
-2. Relancez `intlayer build` pour régénérer les fichiers JSON sous `./react-intl/messages`.
-3. React (et react-intl) détecteront les mises à jour la prochaine fois que vous reconstruirez ou rechargerez votre application.
+    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 le 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).
 
----
+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.
 
-## Intégration TypeScript (Optionnelle)
+Pour plus de détails sur le plugin `syncJSON`, veuillez consulter la [documentation du plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md).
 
-Si vous utilisez TypeScript, Intlayer peut **générer des définitions de types** pour vos traductions.
+## Configuration Git
 
-- Assurez-vous que `tsconfig.json` inclut votre dossier `types` (ou quel que soit le dossier de sortie qu'Intlayer génère) dans le tableau `"include"`.
+Il est recommandé d'ignorer les fichiers Intlayer générés automatiquement :
 
-```json5
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
+```plaintext fileName=".gitignore"
+# Ignorer les fichiers générés par Intlayer
+.intlayer
 ```
 
-Les types générés peuvent aider à détecter les traductions manquantes ou les clés invalides dans vos composants React à l'heure de la compilation.
-
----
-
-## Configuration Git
+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.
 
-Il est courant d'**exclure** les artefacts de construction internes d'Intlayer du contrôle de version. Dans votre `.gitignore`, ajoutez :
+### Extension VS Code
 
-```plaintext
-# Ignorer les artefacts de construction d'intlayer
-.intlayer
-react-intl
-```
+Pour une meilleure expérience développeur, installez l'extension officielle **Intlayer VS Code Extension** :
 
-En fonction de votre flux de travail, vous voudrez peut-être également ignorer ou valider les dictionnaires finaux dans `./react-intl/messages`. Si votre pipeline CI/CD les régénère, vous pouvez les ignorer en toute sécurité ; sinon, validez-les si vous en avez besoin pour des déploiements en production.
+[Installer depuis le Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/hi/intlayer_with_i18next.md

@@ -1,12 +1,12 @@
 ---
 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
-  - अंतर्राष्ट्रीयकरण
+  - अंतरराष्ट्रीयकरण
   - i18n
   - स्थानीयकरण
   - अनुवाद
@@ -14,149 +14,113 @@ 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 एक ओपन-सोर्स अंतर्राष्ट्रीयकरण (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/hi/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/hi/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 इस प्रक्रिया को सरल बनाता है, और अधिक सरल कॉन्फ़िगरेशन प्रदान करता है।
+यह गाइड आपको दिखाता है कि कैसे Intlayer की श्रेष्ठ सामग्री घोषणा प्रणाली का लाभ उठाते हुए i18next के साथ संगतता बनाए रखी जाए।
 
-### 3. अनुवाद शब्दकोष की स्थिरता
+## सामग्री सूची
 
-विभिन्न भाषाओं में अनुवाद शब्दकोषों की स्थिरता सुनिश्चित करना i18next के साथ चुनौतीपूर्ण हो सकता है। अगर इसे ठीक से नहीं संभाला गया तो यह अनुप्रयोग को क्रैश कर सकता है। Intlayer इस समस्या का समाधान करके अनुवादित सामग्री पर बाधाएँ लागू करता है, सुनिश्चित करता है कि कोई अनुवाद छूटा नहीं है और अनुवादित सामग्री सटीक है।
+<TOC/>
 
-### 4. TypeScript एकीकरण
+## i18next के साथ Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
 
-Intlayer को TypeScript के साथ बेहतर एकीकरण प्रदान करता है, जो आपके कोड में सामग्री के स्वचालित सुझावों की अनुमति देता है, जिससे विकास की दक्षता बढ़ती है।
+### चरण 1: निर्भरताएँ स्थापित करें
 
-### 5. अनुप्रयोगों में सामग्री साझा करना
+आवश्यक पैकेज इंस्टॉल करें:
 
-Intlayer कई अनुप्रयोगों और साझा पुस्तकालयों के बीच सामग्री घोषणा फ़ाइलों को साझा करने की सुविधा देता है। यह सुविधा बड़े कोडबेस में सुसंगत अनुवाद बनाए रखना सरल बनाती है।
-
-## Intlayer के साथ i18next शब्दकोष कैसे उत्पन्न करें
+```bash packageManager="npm"
+npm install intlayer @intlayer/sync-json-plugin
+```
 
-### Intlayer को i18next शब्दकोष निर्यात करने के लिए कॉन्फ़िगर करना
+```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");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Intlayer को यह बताना कि वह Intlayer और i18next दोनों शब्दकोषों को निर्यात करेगा
-    dictionaryOutput: ["intlayer", "i18next"],
-    // प्रोजेक्ट रूट से उस निर्देशिका के सापेक्ष पथ जहां i18n शब्दकोष निर्यात किए जाएंगे
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
-
-module.exports = config;
-```
+`syncJSON` प्लगइन स्वचालित रूप से JSON को लपेटेगा। यह JSON फ़ाइलों को पढ़ेगा और लिखेगा बिना सामग्री संरचना को बदले।
 
-कॉन्फ़िगरेशन में 'i18next' को शामिल करके, Intlayer i18next शब्दकोषों के साथ-साथ Intlayer शब्दकोष भी उत्पन्न करता है। ध्यान दें कि कॉन्फ़िगरेशन से 'intlayer' को हटाने से React-Intlayer या Next-Intlayer के साथ संगतता टूट सकती है।
+यदि आप JSON को intlayer सामग्री घोषणा फ़ाइलों (`.content` फ़ाइलें) के साथ सह-अस्तित्व में रखना चाहते हैं, तो Intlayer इस प्रकार आगे बढ़ेगा:
 
-### अपने i18next कॉन्फ़िगरेशन में शब्दकोष आयात करना
+    1. JSON और सामग्री घोषणा फ़ाइलों दोनों को लोड करें और उन्हें intlayer शब्दकोश में परिवर्तित करें।
+    2. यदि JSON और सामग्री घोषणा फ़ाइलों के बीच संघर्ष होता है, तो Intlayer उन सभी शब्दकोशों को मर्ज करने की प्रक्रिया करेगा। यह प्लगइन्स की प्राथमिकता और सामग्री घोषणा फ़ाइल की प्राथमिकता पर निर्भर करता है (सभी कॉन्फ़िगर करने योग्य हैं)।
 
-आप अपने i18next कॉन्फ़िगरेशन में उत्पन्न शब्दकोष को आयात करने के लिए 'i18next-resources-to-backend' का उपयोग कर सकते हैं। यहां दिए गए उदाहरण में दिखाया गया है कि आप अपने i18next शब्दकोष को कैसे आयात कर सकते हैं:
+यदि JSON का अनुवाद करने के लिए CLI का उपयोग करके या CMS का उपयोग करके परिवर्तन किए जाते हैं, तो Intlayer नई अनुवादों के साथ JSON फ़ाइल को अपडेट करेगा।
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+## Git कॉन्फ़िगरेशन
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+स्वचालित रूप से उत्पन्न Intlayer फ़ाइलों को अनदेखा करने की सलाह दी जाती है:
 
-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";
+### VS कोड एक्सटेंशन
 
-i18next
-  // आपका i18next कॉन्फ़िगरेशन
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+बेहतर डेवलपर अनुभव के लिए, आधिकारिक **Intlayer VS Code एक्सटेंशन** इंस्टॉल करें:
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+[VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
-
-i18next
-  // आपका i18next कॉन्फ़िगरेशन
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+[VS कोड मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)