@intlayer/docs 6.1.5 → 6.1.6-canary.0

package/docs/ar/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: جعل المكون متعدد اللغات (مكتبة i18n) في React و Next.js
+description: تعلم كيفية إعلان واسترجاع المحتوى المحلي لبناء مكون React أو Next.js متعدد اللغات باستخدام Intlayer.
+keywords:
+  - i18n
+  - component
+  - react
+  - multilingual
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# كيفية جعل المكون متعدد اللغات (i18n) باستخدام Intlayer
+
+يوضح هذا الدليل الخطوات الأساسية لجعل مكون واجهة المستخدم متعدد اللغات في إعدادين شائعين:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+ستقوم أولاً بإعلان المحتوى الخاص بك، ثم استرجاعه في مكونك.
+
+## 1) إعلان المحتوى الخاص بك (مشترك بين React و Next.js)
+
+قم بإنشاء ملف إعلان المحتوى بالقرب من مكونك. هذا يحافظ على الترجمات قريبة من مكان استخدامها ويمكّن من الأمان النوعي.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+يدعم JSON أيضًا إذا كنت تفضل ملفات التكوين.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) استرجع محتواك
+
+### الحالة أ — تطبيق React (Vite/SPA)
+
+الطريقة الافتراضية: استخدم `useIntlayer` للاسترجاع بواسطة المفتاح. هذا يحافظ على مكونات خفيفة ومكتوبة بأنواع.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+التصيير على جانب الخادم أو خارج المزود: استخدم `react-intlayer/server` ومرر `locale` صريحًا عند الحاجة.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+بديل: يمكن لـ `useDictionary` قراءة كائن معلن بالكامل إذا كنت تفضل تجميع البنية في موقع الاستدعاء.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### الحالة ب — Next.js (موجه التطبيق)
+
+يفضل استخدام مكونات الخادم لأمان البيانات والأداء. استخدم `useIntlayer` من `next-intlayer/server` في ملفات الخادم، و`useIntlayer` من `next-intlayer` في مكونات العميل.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+نصيحة: للحصول على بيانات وصفية للصفحة وتحسين محركات البحث، يمكنك أيضًا جلب المحتوى باستخدام `getIntlayer` وإنشاء روابط متعددة اللغات عبر `getMultilingualUrls`.
+
+## لماذا نهج مكونات Intlayer هو الأفضل
+
+- **التجميع**: تعيش إعلانات المحتوى بالقرب من المكونات، مما يقلل الانحراف ويحسن إعادة الاستخدام عبر أنظمة التصميم.
+- **سلامة النوع**: المفاتيح والهياكل ذات أنواع قوية؛ تظهر الترجمات المفقودة أثناء وقت البناء بدلاً من وقت التشغيل.
+- **الخادم أولاً**: يعمل بشكل أصلي في مكونات الخادم لأمان وأداء أفضل؛ تبقى الخطافات الخاصة بالعميل سهلة الاستخدام.
+- **إزالة الشجرة (Tree-shaking)**: يتم تجميع المحتوى المستخدم فقط بواسطة المكون، مما يحافظ على صغر حجم الحمولة في التطبيقات الكبيرة.
+- **تجربة المطور والأدوات**: تتضمن طبقة وسيطة مدمجة، ومساعدات تحسين محركات البحث، وترجمات اختيارية عبر المحرر المرئي/الذكاء الاصطناعي لتبسيط العمل اليومي.
+
+راجع المقارنات والأنماط في الملخص الموجه لـ Next.js: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## الأدلة والمراجع ذات الصلة
+
+- إعداد React (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- بداية TanStack: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- إعداد Next.js: https://intlayer.org/doc/environment/nextjs
+- لماذا Intlayer مقابل next-intl مقابل next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+تتضمن هذه الصفحات إعدادًا شاملاً، ومزودين، والتوجيه، ومساعدات تحسين محركات البحث.

package/docs/ar/vs_code_extension.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: ملحق VS Code الرسمي
-description: تعلّم كيفية استخدام ملحق Intlayer في VS Code لتعزيز سير عمل التطوير الخاص بك. تنقل بسرعة بين المحتوى المحلي وأدر القواميس الخاصة بك بكفاءة.
+description: تعلّم كيفية استخدام ملحق Intlayer في VS Code لتعزيز سير عمل التطوير الخاص بك. تنقل بسرعة بين المحتوى المحلي وأدر قواميسك بكفاءة.
 keywords:
   - ملحق VS Code
   - Intlayer
@@ -23,161 +23,100 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) هو الملحق الرسمي لـ Visual Studio Code الخاص بـ **Intlayer**، مصمم لتحسين تجربة المطور عند العمل مع المحتوى المحلي في مشاريعك.
 
-![ملحق Intlayer لـ VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![ملحق Intlayer لـ VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 رابط الملحق: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## الميزات
 
-### التنقل الفوري
+![ملء القواميس](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**دعم الانتقال إلى التعريف** – استخدم `⌘ + Click` (ماك) أو `Ctrl + Click` (ويندوز/لينكس) على مفتاح `useIntlayer` لفتح ملف المحتوى المقابل فورًا.  
-**تكامل سلس** – يعمل بسهولة مع مشاريع **react-intlayer** و **next-intlayer**.  
-**دعم متعدد اللغات** – يدعم المحتوى المحلي عبر لغات مختلفة.  
-**تكامل مع VS Code** – يندمج بسلاسة مع التنقل ولوحة الأوامر في VS Code.
+- **التنقل الفوري** – القفز بسرعة إلى ملف المحتوى الصحيح عند النقر على مفتاح `useIntlayer`.
+- **ملء القواميس** – ملء القواميس بالمحتوى من مشروعك.
 
-### أوامر إدارة القواميس
+![قائمة الأوامر](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-قم بإدارة قواميس المحتوى الخاصة بك مباشرة من VS Code:
+- **الوصول السهل إلى أوامر Intlayer** – بناء، دفع، سحب، ملء، اختبار قواميس المحتوى بسهولة.
 
-- **إنشاء القواميس** – توليد ملفات المحتوى بناءً على هيكل مشروعك.
-- **دفع القواميس** – رفع أحدث محتوى القاموس إلى مستودعك.
-- **سحب القواميس** – مزامنة أحدث محتوى القاموس من مستودعك إلى بيئتك المحلية.
-- **ملء القواميس** – تعبئة القواميس بالمحتوى من مشروعك.
-- **اختبار القواميس** – تحديد الترجمات المفقودة أو غير المكتملة.
+![إنشاء ملف محتوى](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### مولد إعلان المحتوى
+- **مولد إعلان المحتوى** – إنشاء ملفات محتوى القاموس بصيغ مختلفة (`.ts`, `.esm`, `.cjs`, `.json`).
 
-قم بسهولة بتوليد ملفات قاموس منظمة بصيغ مختلفة:
+![اختبار القواميس](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-إذا كنت تعمل حاليًا على مكون، فسيتم إنشاء ملف `.content.{ts,tsx,js,jsx,mjs,cjs,json}` لك.
+- **اختبار القواميس** – اختبار القواميس للترجمات المفقودة.
 
-مثال على مكون:
+![إعادة بناء القاموس](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **حافظ على تحديث قواميسك** – حافظ على تحديث قواميسك بأحدث المحتويات من مشروعك.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-الملف المُولد بصيغة TypeScript:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
-
-export default componentContent;
-```
-
-الصيغ المتاحة:
-
-- **TypeScript (`.ts`)**
-- **وحدة ES (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### تبويب Intlayer (شريط النشاط)
+![علامة تبويب Intlayer (شريط النشاط)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-افتح تبويب Intlayer بالنقر على أيقونة Intlayer في شريط نشاط VS Code. يحتوي على عرضين:
-
-- **بحث**: شريط بحث مباشر لتصفية القواميس ومحتواها بسرعة. الكتابة تحدث النتائج فورًا.
-- **القواميس**: عرض شجري لبيئاتك/مشاريعك، مفاتيح القواميس، والملفات التي تساهم بالإدخالات. يمكنك:
-  - النقر على ملف لفتحه في المحرر.
-  - استخدام شريط الأدوات لتنفيذ الأوامر: بناء، سحب، دفع، تعبئة، تحديث، اختبار، وإنشاء ملف قاموس.
-  - استخدام قائمة السياق لإجراءات محددة على العنصر:
-    - على قاموس: سحب أو دفع
-    - على ملف: تعبئة القاموس
-  - عند تبديل المحررات، سيكشف العرض الشجري عن الملف المطابق إذا كان ينتمي إلى قاموس.
-
-## التثبيت
-
-يمكنك تثبيت **Intlayer** مباشرة من سوق إضافات VS Code:
-
-1. افتح **VS Code**.
-2. اذهب إلى **سوق الإضافات**.
-3. ابحث عن **"Intlayer"**.
-4. انقر على **تثبيت**.
+- **علامة تبويب Intlayer (شريط النشاط)** – تصفح وابحث في القواميس من علامة تبويب جانبية مخصصة مع شريط أدوات وإجراءات سياقية (بناء، سحب، دفع، ملء، تحديث، اختبار، إنشاء ملف).
 
 ## الاستخدام
 
 ### التنقل السريع
 
 1. افتح مشروعًا يستخدم **react-intlayer**.
-2. حدد مكالمة إلى `useIntlayer()`، مثل:
+2. حدد موقع استدعاء `useIntlayer()`، مثل:
 
    ```tsx
    const content = useIntlayer("app");
    ```
 
 3. **انقر مع الضغط على الأمر** (`⌘+Click` على macOS) أو **Ctrl+Click** (على Windows/Linux) على المفتاح (مثل `"app"`).
-4. سيفتح VS Code تلقائيًا ملف القاموس المقابل، مثل `src/app.content.ts`.
-
-### إدارة قواميس المحتوى
+4. سيقوم VS Code بفتح ملف القاموس المقابل تلقائيًا، مثل `src/app.content.ts`.
 
-### تبويب Intlayer (شريط النشاط)
+### علامة تبويب Intlayer (شريط النشاط)
 
-استخدم التبويب الجانبي لتصفح وإدارة القواميس:
+استخدم علامة التبويب الجانبية لتصفح وإدارة القواميس:
 
 - افتح أيقونة Intlayer في شريط النشاط.
 - في **البحث**، اكتب لتصفية القواميس والإدخالات في الوقت الحقيقي.
-- في **القواميس**، تصفح البيئات والقواميس والملفات. استخدم شريط الأدوات للبناء، السحب، الدفع، الملء، التحديث، الاختبار، وإنشاء ملف القاموس. انقر بزر الماوس الأيمن للحصول على إجراءات السياق (السحب/الدفع على القواميس، الملء على الملفات). يتم الكشف تلقائيًا عن ملف المحرر الحالي في الشجرة عند الاقتضاء.
+- في **القواميس**، تصفح البيئات والقواميس والملفات. استخدم شريط الأدوات للبناء، السحب، الدفع، الملء، التحديث، الاختبار، وإنشاء ملف قاموس. انقر بزر الماوس الأيمن للحصول على إجراءات سياقية (سحب/دفع على القواميس، ملء على الملفات). يتم الكشف تلقائيًا عن ملف المحرر الحالي في الشجرة عند الاقتضاء.
 
-#### بناء القواميس
+### الوصول إلى الأوامر
 
-قم بإنشاء جميع ملفات محتوى القاموس باستخدام:
+يمكنك الوصول إلى الأوامر من **لوحة الأوامر**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-ابحث عن **Build Dictionaries** ونفذ الأمر.
-
-#### دفع القواميس
-
-قم بتحميل أحدث محتوى القاموس:
-
-1. افتح **لوحة الأوامر**.
-2. ابحث عن **Push Dictionaries**.
-3. اختر القواميس التي تريد دفعها وقم بالتأكيد.
-
-#### سحب القواميس
+- **بناء القواميس**
+- **دفع القواميس**
+- **سحب القواميس**
+- **ملء القواميس**
+- **اختبار القواميس**
+- **إنشاء ملف قاموس**
 
-مزامنة أحدث محتوى القاموس:
+### تحميل متغيرات البيئة
 
-1. افتح **لوحة الأوامر**.
-2. ابحث عن **Pull Dictionaries**.
-3. اختر القواميس التي تريد سحبها.
+توصي Intlayer بتخزين مفاتيح API الخاصة بالذكاء الاصطناعي، بالإضافة إلى معرف العميل وسرية Intlayer في متغيرات البيئة.
 
-#### ملء القواميس
+يمكن للإضافة تحميل متغيرات البيئة من مساحة العمل الخاصة بك لتشغيل أوامر Intlayer بالسياق الصحيح.
 
-املأ القواميس بالمحتوى من مشروعك:
+- **ترتيب التحميل (حسب الأولوية)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **غير مدمر**: لا يتم تجاوز قيم `process.env` الموجودة.
+- **النطاق**: يتم حل الملفات من الدليل الأساسي المُكوَّن (افتراضيًا جذر مساحة العمل).
 
-1. افتح **لوحة الأوامر**.
-2. ابحث عن **Fill Dictionaries**.
-3. نفذ الأمر لملء القواميس.
+#### اختيار البيئة النشطة
 
-#### اختبار القواميس
+- **لوحة الأوامر**: افتح اللوحة وقم بتشغيل الأمر `Intlayer: Select Environment`، ثم اختر البيئة (مثلًا، `development`، `staging`، `production`). ستحاول الإضافة تحميل أول ملف متاح في قائمة الأولويات أعلاه وستعرض إشعارًا مثل "تم تحميل البيئة من .env.<env>.local".
+- **الإعدادات**: اذهب إلى `Settings → Extensions → Intlayer`، وقم بتعيين:
+  - **البيئة**: اسم البيئة المستخدمة لحل ملفات `.env.<env>*`.
+  - (اختياري) **ملف البيئة**: مسار صريح لملف `.env`. عند توفيره، يكون له الأولوية على القائمة المستنتجة.
 
-تحقق من صحة القواميس واكتشف الترجمات المفقودة:
+#### المستودعات الأحادية والمجلدات المخصصة
 
-1. افتح **لوحة الأوامر**.
-2. ابحث عن **Test Dictionaries**.
-3. راجع المشكلات المبلغ عنها وقم بإصلاحها حسب الحاجة.
+إذا كانت ملفات `.env` الخاصة بك موجودة خارج جذر مساحة العمل، فقم بتعيين **الدليل الأساسي** في `الإعدادات → الإضافات → Intlayer`. سيبحث المحمل عن ملفات `.env` نسبةً إلى ذلك الدليل.
 
 ## تاريخ الوثيقة
 
-| الإصدار | التاريخ    | التغييرات     |
-| ------- | ---------- | ------------- |
-| 5.5.10  | 2025-06-29 | بداية التاريخ |
+| الإصدار | التاريخ    | التغييرات                                |
+| ------- | ---------- | ---------------------------------------- |
+| 6.1.5   | 2025-09-30 | إضافة صورة متحركة توضيحية                |
+| 6.1.0   | 2025-09-24 | إضافة قسم اختيار البيئة                  |
+| 6.0.0   | 2025-09-22 | تبويب Intlayer / أوامر التعبئة والاختبار |
+| 5.5.10  | 2025-06-29 | بدء السجل                                |

package/docs/de/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Eine Komponente mehrsprachig machen (i18n-Bibliothek) in React und Next.js
+description: Lernen Sie, wie Sie lokalisierten Inhalt deklarieren und abrufen, um eine mehrsprachige React- oder Next.js-Komponente mit Intlayer zu erstellen.
+keywords:
+  - i18n
+  - komponent
+  - react
+  - mehrsprachig
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# Wie man eine Komponente mehrsprachig macht (i18n) mit Intlayer
+
+Diese Anleitung zeigt die minimalen Schritte, um eine UI-Komponente in zwei gängigen Setups mehrsprachig zu machen:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+Zuerst deklarieren Sie Ihren Inhalt und rufen ihn dann in Ihrer Komponente ab.
+
+## 1) Deklarieren Sie Ihren Inhalt (gemeinsam für React und Next.js)
+
+Erstellen Sie eine Inhaltsdeklarationsdatei in der Nähe Ihrer Komponente. Dies hält die Übersetzungen nah an der Verwendung und ermöglicht Typsicherheit.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "Eine mehrsprachige React-Komponente", // Kommentar auf Deutsch
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+JSON wird ebenfalls unterstützt, wenn Sie Konfigurationsdateien bevorzugen.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Eine mehrsprachige React-Komponente",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) Rufen Sie Ihren Inhalt ab
+
+### Fall A — React-App (Vite/SPA)
+
+Standardansatz: Verwenden Sie `useIntlayer`, um per Schlüssel abzurufen. Dies hält Komponenten schlank und typisiert.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Serverseitiges Rendering oder außerhalb des Providers: Verwenden Sie `react-intlayer/server` und übergeben Sie bei Bedarf eine explizite `locale`.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+Alternative: `useDictionary` kann ein vollständig deklariertes Objekt lesen, wenn Sie die Struktur lieber am Aufrufort zusammenhalten möchten.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### Fall B — Next.js (App Router)
+
+Bevorzugen Sie Server-Komponenten für Datensicherheit und Leistung. Verwenden Sie `useIntlayer` aus `next-intlayer/server` in Server-Dateien und `useIntlayer` aus `next-intlayer` in Client-Komponenten.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Tipp: Für Seiten-Metadaten und SEO können Sie Inhalte auch mit `getIntlayer` abrufen und mehrsprachige URLs über `getMultilingualUrls` generieren.
+
+## Warum der Komponentenansatz von Intlayer der beste ist
+
+- **Kollokation**: Inhaltsdeklarationen befinden sich nahe bei den Komponenten, was Drift reduziert und die Wiederverwendung in Designsystemen verbessert.
+- **Typsicherheit**: Schlüssel und Strukturen sind stark typisiert; fehlende Übersetzungen werden zur Build-Zeit und nicht zur Laufzeit erkannt.
+- **Server-first**: Funktioniert nativ in Server-Komponenten für bessere Sicherheit und Leistung; Client-Hooks bleiben ergonomisch.
+- **Tree-shaking**: Es wird nur der Inhalt gebündelt, der von der Komponente verwendet wird, wodurch die Payloads in großen Apps klein bleiben.
+- **DX & Tooling**: Eingebaute Middleware, SEO-Hilfen und optionale Visual Editor/AI-Übersetzungen optimieren die tägliche Arbeit.
+
+Siehe die Vergleiche und Muster im Next.js-fokussierten Überblick: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Verwandte Anleitungen und Referenzen
+
+- React Setup (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js Einrichtung: https://intlayer.org/doc/environment/nextjs
+- Warum Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+Diese Seiten enthalten End-to-End-Setup, Provider, Routing und SEO-Hilfen.