@intlayer/docs 7.0.4-canary.0 → 7.0.5

package/blog/ar/intlayer_with_react-intl.md

@@ -1,325 +1,122 @@
 ---
 createdAt: 2025-01-02
-updatedAt: 2025-06-29
-title: Intlayer وreact-intl
-description: دمج Intlayer مع react-intl لتطبيق React
+updatedAt: 2025-10-29
+title: كيفية أتمتة ترجمات JSON الخاصة بـ react-intl باستخدام Intlayer
+description: أتمتة ترجمات JSON الخاصة بك باستخدام Intlayer و react-intl لتعزيز التدويل في تطبيقات React.
 keywords:
   - react-intl
   - Intlayer
   - التدويل
-  - التوثيق
-  - Next.js
-  - JavaScript
+  - مدونة
+  - i18n
+  - جافا سكريبت
   - React
+  - FormatJS
 slugs:
   - blog
   - intlayer-with-react-intl
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: التغيير إلى مكون syncJSON
 ---
 
-# React Internationalization (i18n) مع **react-intl** و Intlayer
+# كيفية أتمتة ترجمات JSON الخاصة بـ react-intl باستخدام Intlayer
 
-هذا الدليل يوضح كيفية دمج **Intlayer** مع **react-intl** لإدارة الترجمات في تطبيق React. ستقوم بإعلان المحتوى القابل للترجمة الخاص بك باستخدام Intlayer ثم استهلاك تلك الرسائل مع **react-intl**، وهي مكتبة شهيرة من نظام [FormatJS](https://formatjs.io/docs/react-intl) البيئي.
+## ما هو Intlayer؟
 
-## نظرة عامة
+**Intlayer** هي مكتبة تدويل مبتكرة ومفتوحة المصدر مصممة لمعالجة أوجه القصور في حلول i18n التقليدية. تقدم نهجًا حديثًا لإدارة المحتوى في تطبيقات React.
 
-- **Intlayer** يسمح لك بتخزين الترجمات في ملفات إعلان المحتوى على مستوى المكون (JSON، JS، TS، إلخ) داخل مشروعك.
-- **react-intl** يوفر مكونات React وhooks (مثل `<FormattedMessage>` و `useIntl()`) لعرض السلاسل المحلية.
+اطلع على مقارنة ملموسة مع react-intl في منشور مدونتنا [react-i18next مقابل react-intl مقابل Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/ar/react-i18next_vs_react-intl_vs_intlayer.md).
 
-من خلال تكوين Intlayer لـ **تصدير** الترجمات بتنسيق متوافق مع **react-intl**، يمكنك تلقائيًا **توليد** و **تحديث** ملفات الرسائل التي يتطلبها `<IntlProvider>` (من react-intl).
+## لماذا الجمع بين Intlayer و react-intl؟
 
----
+بينما يوفر Intlayer حلاً ممتازًا مستقلاً لـ i18n (راجع دليل التكامل مع React الخاص بنا [React integration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/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 للمساعدة في أتمتة ترجمات JSON الخاصة بك في واجهة الأوامر أو خطوط أنابيب CI/CD، اختبار ترجماتك، والمزيد.**
 
-   ```bash
-   .
-   └── src
-       └── components
-           └── MyComponent
-               ├── index.content.ts   # إعلان محتوى Intlayer
-               └── index.tsx          # مكون React
-   ```
+يوضح هذا الدليل كيفية الاستفادة من نظام إعلان المحتوى المتفوق في Intlayer مع الحفاظ على التوافق مع react-intl.
 
-2. **ترجمات مركزية**  
-   كل ملف إعلان محتوى يجمع جميع الترجمات التي يحتاجها مكون. هذا مفيد بشكل خاص في مشاريع TypeScript: يمكن اكتشاف الترجمات المفقودة في **وقت التجميع**.
+## جدول المحتويات
 
-3. **بناء تلقائي وتجديد**  
-   كلما قمت بإضافة أو تحديث الترجمات، يقوم Intlayer بتجديد ملفات JSON للرسائل. يمكنك بعد ذلك تمرير هذه إلى `<IntlProvider>` لـ react-intl.
+<TOC/>
 
----
+## دليل خطوة بخطوة لإعداد Intlayer مع react-intl
 
-## التثبيت
+### الخطوة 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**: المكتبة الرئيسية من FormatJS التي توفر `<IntlProvider>`، `<FormattedMessage>`، `useIntl()` وغيرها من العناصر الأساسية في التدويل.
+- **intlayer**: المكتبة الأساسية لإدارة التدويل، إعلان المحتوى، والبناء
+- **@intlayer/sync-json-plugin**: إضافة لتصدير إعلانات محتوى Intlayer إلى صيغة JSON متوافقة مع react-intl
 
-> إذا لم يكن لديك React مثبتًا بالفعل، ستحتاج إلى ذلك أيضًا (`react` و `react-dom`).
+### الخطوة 2: تنفيذ إضافة Intlayer لتغليف JSON
 
-## تكوين Intlayer لتصدير رسائل react-intl
+قم بإنشاء ملف تكوين Intlayer لتعريف اللغات المدعومة لديك:
 
-في جذر مشروعك، أنشئ **`intlayer.config.ts`** (أو `.js`، `.mjs`، `.cjs`) كما يلي:
+**إذا كنت تريد أيضًا تصدير قواميس JSON لـ react-intl**، أضف إضافة `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/ar/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" يصبح المفتاح الرئيسي للرسالة في ملف JSON الخاص بك react-intl
-  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/ar/doc/concept/content).
-
----
-
-## بناء رسائل react-intl
-
-لتوليد ملفات JSON الفعلية للرسائل لـ **react-intl**، قم بتشغيل:
-
-```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
-```
-
-كل ملف هو كائن JSON تُطابق **المفاتيح العليا** الخاصة به كل **`content.key`** من إعلاناتك. تعكس **المفاتيح الفرعية** (مثل `helloWorld`) الترجمات المعلنة داخل تلك العنصر المحتوى.
-
-على سبيل المثال، قد يبدو **en.json** كما يلي:
-
-```json fileName="react-intl/messages/en/my-component.json"
-{
-  "helloWorld": "Hello World",
-  "description": "This is a description"
-}
-```
-
----
-
-## تهيئة react-intl في تطبيق React الخاص بك
-
-### 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>
-  );
-}
-```
-
-> يجب أن تطابق خاصية **`id`** في `<FormattedMessage>` **المفتاح الرئيسي** (`my-component`) بالإضافة إلى أي مفاتيح فرعية (`helloWorld`).
-
-### النهج B: `useIntl()`
-
-للاستخدام الأكثر ديناميكية:
-
-```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;
 ```
 
-كلا النهجين صالحة - اختر النمط الذي يناسب تطبيقك.
+ستقوم إضافة `syncJSON` تلقائيًا بتغليف JSON. ستقوم بقراءة وكتابة ملفات JSON دون تغيير بنية المحتوى.
 
----
-
-## تحديث أو إضافة ترجمات جديدة
+إذا كنت تريد جعل JSON يتعايش مع ملفات إعلان محتوى intlayer (`.content` files)، فسيقوم Intlayer بالإجراء التالي:
 
-1. **أضف أو عدل** المحتوى في أي ملف `*.content.*`.
-2. أعد تشغيل `intlayer build` لتجديد ملفات JSON تحت `./react-intl/messages`.
-3. سوف يلتقط React (و react-intl) التحديثات في المرة القادمة التي تعيد فيها بناء أو تحميل تطبيقك.
+    1. تحميل كل من ملفات JSON وملفات إعلان المحتوى وتحويلها إلى قاموس intlayer.
+    2. إذا كانت هناك تعارضات بين ملفات JSON وملفات إعلان المحتوى، فسيقوم Intlayer بدمج جميع القواميس. وذلك يعتمد على أولوية الإضافات، وأولوية ملف إعلان المحتوى (كلها قابلة للتكوين).
 
----
+إذا تم إجراء تغييرات باستخدام واجهة الأوامر CLI لترجمة JSON، أو باستخدام نظام إدارة المحتوى CMS، فسيقوم Intlayer بتحديث ملف JSON بالترجمات الجديدة.
 
-## تكامل TypeScript (اختياري)
+للاطلاع على مزيد من التفاصيل حول إضافة `syncJSON`، يرجى الرجوع إلى [توثيق إضافة syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/plugins/sync-json.md).
 
-إذا كنت تستخدم TypeScript، يمكن أن يقوم Intlayer **بتوليد تعريفات الأنواع** لترجماتك.
+## إعدادات Git
 
-- تأكد من أن `tsconfig.json` يتضمن مجلد `types` الخاص بك (أو أي مجلد ناتج ينشئه Intlayer) في مصفوفة `"include"`.
+يوصى بتجاهل ملفات Intlayer التي يتم إنشاؤها تلقائيًا:
 
-```json5
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", "types"],
-}
+```plaintext fileName=".gitignore"
+# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
+.intlayer
 ```
 
-يمكن أن تساعد الأنواع المولدة في الكشف عن الترجمات المفقودة أو المفاتيح غير الصالحة في مكونات React الخاصة بك في وقت التجميع.
+يمكن إعادة إنشاء هذه الملفات أثناء عملية البناء الخاصة بك ولا تحتاج إلى الالتزام بها في نظام التحكم في الإصدارات.
 
----
-
-## تكوين Git
-
-من الشائع **استبعاد** العناصر الناتجة الداخلية لـ Intlayer من التحكم في الإصدارات. في ملف `.gitignore` الخاص بك، أضف:
+### إضافة VS Code
 
-```plaintext
-# تجاهل العناصر الناتجة من بناء intlayer
-.intlayer
-react-intl
-```
+لتحسين تجربة المطور، قم بتثبيت **إضافة Intlayer الرسمية لـ VS Code**:
 
-اعتمادًا على سير عملك، قد ترغب أيضًا في تجاهل أو الالتزام بالقواميس النهائية في `./react-intl/messages`. إذا كان خط أنابيب CI/CD لديك يجددها، يمكنك تجاهلها بأمان؛ وإلا، التزم بها إذا كنت بحاجة إليها لعمليات نشر الإنتاج.
+[التثبيت من سوق VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)

package/blog/de/intlayer_with_i18next.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-12-24
-updatedAt: 2025-06-29
-title: Intlayer und i18next
-description: Integrieren Sie Intlayer mit i18next für optimale Internationalisierung. Vergleichen Sie die beiden Frameworks und lernen Sie, wie Sie sie zusammen konfigurieren.
+updatedAt: 2025-10-29
+title: Wie Sie Ihre i18next JSON-Übersetzungen mit Intlayer automatisieren
+description: Automatisieren Sie Ihre JSON-Übersetzungen mit Intlayer und i18next für eine verbesserte Internationalisierung in JavaScript-Anwendungen.
 keywords:
   - Intlayer
   - i18next
@@ -14,149 +14,129 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+  - Migration
+  - Integration
 slugs:
   - blog
   - intlayer-with-i18next
+history:
+  - version: 7.0.0
+    date: 2025-10-29
+    changes: Wechsel zum syncJSON-Plugin
 ---
 
-# Internationalisierung mit Intlayer und i18next
+# Wie Sie Ihre i18next JSON-Übersetzungen mit Intlayer automatisieren
 
-i18next ist ein Open-Source-Internationalisierungs (i18n) Framework, das für JavaScript-Anwendungen entwickelt wurde. Es wird häufig für die Verwaltung von Übersetzungen, Lokalisierung und Sprachwechsel in Softwareprojekten verwendet. Es hat jedoch einige Einschränkungen, die die Skalierbarkeit und die Entwicklung erschweren können.
+## Was ist Intlayer?
 
-Intlayer ist ein weiteres Internationalisierungsframework, das diese Einschränkungen behebt und einen flexibleren Ansatz zur Inhaltsdeklaration und -verwaltung bietet. Lassen Sie uns einige wichtige Unterschiede zwischen i18next und Intlayer sowie deren Konfiguration für optimierte Internationalisierung erkunden.
+**Intlayer** ist eine innovative, Open-Source-Internationalisierungsbibliothek, die entwickelt wurde, um die Schwächen traditioneller i18n-Lösungen zu beheben. Sie bietet einen modernen Ansatz für das Content-Management in JavaScript-Anwendungen.
 
-## Intlayer vs. i18next: Hauptunterschiede
+Sehen Sie einen konkreten Vergleich mit i18next in unserem Blogbeitrag [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/next-i18next_vs_next-intl_vs_intlayer.md).
 
-### 1. Inhaltsdeklaration
+## Warum Intlayer mit i18next kombinieren?
 
-Bei i18next müssen Übersetzungswörterbücher in einem bestimmten Ordner deklariert werden, was die Skalierbarkeit der Anwendung erschweren kann. Im Gegensatz dazu ermöglicht Intlayer die Deklaration von Inhalten im selben Verzeichnis wie Ihre Komponente. Dies hat mehrere Vorteile:
+Während Intlayer eine ausgezeichnete eigenständige i18n-Lösung bietet (siehe unseren [Next.js-Integrationsleitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_16.md)), möchten Sie es möglicherweise aus mehreren Gründen mit i18next kombinieren:
 
-- **Vereinfachte Inhaltsbearbeitung**: Benutzer müssen nicht nach dem richtigen Wörterbuch suchen, um Änderungen vorzunehmen, wodurch die Fehlerquote verringert wird.
-- **Automatische Anpassung**: Wenn sich der Standort einer Komponente ändert oder sie entfernt wird, erkennt Intlayer dies und passt sich automatisch an.
+1. **Bestehender Codebestand**: Sie haben eine etablierte i18next-Implementierung und möchten schrittweise auf die verbesserte Entwicklererfahrung von Intlayer migrieren.
+2. **Altsystem-Anforderungen**: Ihr Projekt erfordert Kompatibilität mit bestehenden i18next-Plugins oder Workflows.
+3. **Teamvertrautheit**: Ihr Team ist mit i18next vertraut, möchte jedoch ein besseres Content-Management.
 
-### 2. Komplexität der Konfiguration
+**Dafür kann Intlayer als Adapter für i18next implementiert werden, um Ihre JSON-Übersetzungen in CLI- oder CI/CD-Pipelines zu automatisieren, Ihre Übersetzungen zu testen und mehr.**
 
-Die Konfiguration von i18next kann komplex sein, insbesondere bei der Integration mit serverseitigen Komponenten oder der Konfiguration von Middleware für Frameworks wie Next.js. Intlayer vereinfacht diesen Prozess und bietet eine unkompliziertere Konfiguration.
+Dieser Leitfaden zeigt Ihnen, wie Sie das überlegene Content-Deklarationssystem von Intlayer nutzen und gleichzeitig die Kompatibilität mit i18next beibehalten.
 
-### 3. Konsistenz der Übersetzungswörterbücher
+## Inhaltsverzeichnis
 
-Die Gewährleistung, dass Übersetzungswörterbücher in verschiedenen Sprachen konsistent sind, kann mit i18next herausfordernd sein. Diese Inkonsistenz kann zu Anwendungsabstürzen führen, wenn sie nicht ordnungsgemäß behandelt wird. Intlayer behebt dies, indem es Einschränkungen für übersetzte Inhalte durchsetzt, um sicherzustellen, dass keine Übersetzung ausgelassen wird und dass der übersetzte Inhalt genau ist.
+<TOC/>
 
-### 4. TypeScript-Integration
+## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer mit i18next
 
-Intlayer bietet eine bessere Integration mit TypeScript, die automatische Vorschläge für Inhalte in Ihrem Code ermöglicht, wodurch die Effizienz der Entwicklung verbessert wird.
+### Schritt 1: Abhängigkeiten installieren
 
-### 5. Teilen von Inhalten über Anwendungen hinaus
+Installieren Sie die notwendigen Pakete:
 
-Intlayer erleichtert das Teilen von Inhaltsdeklarationsdateien über mehrere Anwendungen und gemeinsame Bibliotheken. Diese Funktion erleichtert die Pflege konsistenter Übersetzungen über einen größeren Codebase.
+```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
+```
 
-## Wie man i18next-Wörterbücher mit Intlayer generiert
+**Paketbeschreibungen:**
 
-### Konfiguration von Intlayer zum Export von i18next-Wörterbüchern
+- **intlayer**: Kernbibliothek für Internationalisierungsmanagement, Content-Deklaration und Build-Prozesse
+- **@intlayer/sync-json-plugin**: Plugin zum Exportieren von Intlayer-Content-Deklarationen in ein i18next-kompatibles JSON-Format
 
-> Wichtige Hinweise
+### Schritt 2: Implementieren Sie das Intlayer-Plugin zum Verpacken des JSON
 
-> Der Export von i18next-Wörterbüchern befindet sich derzeit in der Beta-Phase und gewährleistet keine 1:1-Kompatibilität mit anderen Frameworks. Es wird empfohlen, eine auf Intlayer basierende Konfiguration zu verwenden, um Probleme zu minimieren.
+Erstellen Sie eine Intlayer-Konfigurationsdatei, um Ihre unterstützten Sprachen zu definieren:
 
-Um i18next-Wörterbücher zu exportieren, müssen Sie Intlayer entsprechend konfigurieren. Im Folgenden finden Sie ein Beispiel dafür, wie Sie Intlayer so einrichten, dass sowohl Intlayer- als auch i18next-Wörterbücher exportiert werden.
+**Wenn Sie auch JSON-Wörterbücher für i18next exportieren möchten**, fügen Sie das `syncJSON`-Plugin hinzu:
 
-```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: {
-    // Geben Sie an, dass Intlayer sowohl Intlayer- als auch i18next-Wörterbücher exportieren wird
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Relativer Pfad vom Projektstammverzeichnis zum Verzeichnis, in das die i18n-Wörterbücher exportiert werden
-    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";
+Das `syncJSON`-Plugin wird das JSON automatisch umschließen. Es liest und schreibt die JSON-Dateien, ohne die Inhaltsarchitektur zu verändern.
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Geben Sie an, dass Intlayer sowohl Intlayer- als auch i18next-Wörterbücher exportieren wird
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Relativer Pfad vom Projektstammverzeichnis zum Verzeichnis, in das die i18n-Wörterbücher exportiert werden
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+Wenn Sie möchten, dass dieses JSON zusammen mit Intlayer-Content-Deklarationsdateien (`.content`-Dateien) koexistiert, geht Intlayer wie folgt vor:
 
-export default config;
-```
+    1. Lädt sowohl JSON- als auch Content-Deklarationsdateien und transformiert sie in ein Intlayer-Wörterbuch.
 
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
+2. Wenn es Konflikte zwischen den JSON- und den Inhaltsdeklarationsdateien gibt, wird Intlayer alle Wörterbücher zusammenführen. Dies geschieht abhängig von der Priorität der Plugins und der der Inhaltsdeklarationsdatei (alle sind konfigurierbar).
 
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  content: {
-    // Geben Sie an, dass Intlayer sowohl Intlayer- als auch i18next-Wörterbücher exportieren wird
-    dictionaryOutput: ["intlayer", "i18next"],
-    // Relativer Pfad vom Projektstammverzeichnis zum Verzeichnis, in das die i18n-Wörterbücher exportiert werden
-    i18nextResourcesDir: "./i18next/dictionaries",
-  },
-};
+Wenn Änderungen über die CLI zur Übersetzung des JSON oder über das CMS vorgenommen werden, aktualisiert Intlayer die JSON-Datei mit den neuen Übersetzungen.
 
-module.exports = config;
-```
+## Git-Konfiguration
 
-Durch das Hinzufügen von 'i18next' zur Konfiguration generiert Intlayer spezielle i18next-Wörterbücher zusätzlich zu den Intlayer-Wörterbüchern. Beachten Sie, dass das Entfernen von 'intlayer' aus der Konfiguration die Kompatibilität mit React-Intlayer oder Next-Intlayer beeinträchtigen kann.
+Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:
 
-### Importieren von Wörterbüchern in Ihre i18next-Konfiguration
+```plaintext fileName=".gitignore"
+# Dateien, die von Intlayer generiert werden, ignorieren
+.intlayer
+```
 
-Um die generierten Wörterbücher in Ihre i18next-Konfiguration zu importieren, können Sie 'i18next-resources-to-backend' verwenden. Hier ist ein Beispiel dafür, wie Sie Ihre i18next-Wörterbücher importieren können:
+Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle aufgenommen werden.
 
-```typescript fileName="i18n/client.ts" codeFormat="typescript"
-// i18n/client.ts
+### VS Code Erweiterung
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+Für eine verbesserte Entwicklererfahrung installieren Sie die offizielle **Intlayer VS Code Erweiterung**:
 
-i18next
-  // Ihre i18next-Konfiguration
-  .use(
-    resourcesToBackend(
-      (language: string, namespace: string) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+[Installieren Sie sie aus dem VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-```javascript fileName="i18n/client.mjs" codeFormat="esm"
-// i18n/client.mjs
+## Git-Konfiguration
 
-import i18next from "i18next";
-import resourcesToBackend from "i18next-resources-to-backend";
+Es wird empfohlen, automatisch generierte Intlayer-Dateien zu ignorieren:
 
-i18next
-  // Ihre i18next-Konfiguration
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
+```plaintext fileName=".gitignore"
+# Dateien, die von Intlayer generiert werden, ignorieren
+.intlayer
 ```
 
-```javascript fileName="i18n/client.cjs" codeFormat="commonjs"
-// i18n/client.cjs
+Diese Dateien können während Ihres Build-Prozesses neu generiert werden und müssen nicht in die Versionskontrolle aufgenommen werden.
 
-const i18next = require("i18next");
-const resourcesToBackend = require("i18next-resources-to-backend");
+### VS Code Erweiterung
 
-i18next
-  // Ihre i18next-Konfiguration
-  .use(
-    resourcesToBackend(
-      (language, namespace) =>
-        import(`../i18next/dictionaries/${language}/${namespace}.json`)
-    )
-  );
-```
+Für eine verbesserte Entwicklererfahrung installieren Sie die offizielle **Intlayer VS Code Erweiterung**:
+
+[Installation aus dem VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)