@intlayer/docs 6.1.5 → 6.1.6

package/docs/ar/intlayer_with_vite+preact.md

@@ -1054,38 +1054,38 @@ const App = () => (
 module.exports = App;
 ```
 
-بالتوازي، يمكنك أيضًا استخدام `intlayerMiddlewarePlugin` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي تلقائيًا بالكشف عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
+بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي تلقائيًا بالكشف عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import preact from "@preact/preset-vite";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const preact = require("@preact/preset-vite");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [preact(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [preact(), intlayer(), intlayerMiddleware()],
 });
 ```
 
@@ -1629,9 +1629,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
 
 يستخدم Intlayer توسيع الوحدات (module augmentation) للاستفادة من TypeScript وجعل قاعدة الشيفرة الخاصة بك أقوى.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع التي تم إنشاؤها تلقائيًا.
 

package/docs/ar/intlayer_with_vite+react.md

@@ -1009,38 +1009,38 @@ const App = () => (
 );
 ```
 
-بالتوازي، يمكنك أيضًا استخدام `intlayerMiddlewarePlugin` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فسيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
+بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فسيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const react = require("@vitejs/plugin-react-swc");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [react(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [react(), intlayer(), intlayerMiddleware()],
 });
 ```
 

package/docs/ar/intlayer_with_vite+vue.md

@@ -653,46 +653,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 </template>
 ```
 
-بالتوازي، يمكنك أيضًا استخدام `intlayerMiddlewarePlugin` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
+بالتوازي، يمكنك أيضًا استخدام `intlayerMiddleware` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
 
 ```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import { intlayer, intlayerMiddlewarePlugin } from "vite-intlayer";
+import { intlayer, intlayerMiddleware } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 
 ```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
-const { intlayer, intlayerMiddlewarePlugin } = require("vite-intlayer");
+const { intlayer, intlayerMiddleware } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerMiddlewarePlugin()],
+  plugins: [vue(), intlayer(), intlayerMiddleware()],
 });
 ```
 

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.

package/docs/de/intlayer_with_angular.md

@@ -677,9 +677,9 @@ Für komplexere Szenarien können Sie eine Pipe erstellen, um das HTML sicher zu
 
 Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihren Code robuster zu machen.
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![alt text](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png)
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen einschließt.