@intlayer/docs 8.11.3 → 8.12.0

package/blog/ar/i18n_using_next-i18next.md

@@ -117,7 +117,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام npm:
 
@@ -137,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: روابط React لـ i18next التي توفر هوكات مثل `useTranslation` لمكونات العميل.
 - **i18next-resources-to-backend**: إضافة تتيح التحميل الديناميكي لملفات الترجمة، مما يسمح لك بتحميل مساحات الأسماء التي تحتاجها فقط.
 
-### الخطوة 2: تكوين مشروعك
+</Step>
+
+<Step number={2} title="تكوين مشروعك">
 
 قم بإنشاء ملف تكوين لتعريف اللغات المدعومة، اللغة الافتراضية، ودوال المساعدة لتوطين عناوين URL. يعمل هذا الملف كمصدر وحيد للحقيقة لإعداد i18n الخاص بك ويضمن سلامة الأنواع في جميع أنحاء تطبيقك.
 
@@ -192,7 +196,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### الخطوة 3: مركزية مساحات أسماء الترجمة
+</Step>
+
+<Step number={3} title="مركزية مساحات أسماء الترجمة">
 
 قم بإنشاء مصدر واحد للحقيقة لكل مساحة أسماء (namespace) تعرضها تطبيقك. إعادة استخدام هذه القائمة يحافظ على تزامن كود الخادم والعميل وأدوات التطوير ويفتح إمكانية التحقق القوي من نوع المفاتيح الخاصة بالمترجمين.
 
@@ -202,7 +208,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### الخطوة 4: تعيين نوع قوي لمفاتيح الترجمة باستخدام TypeScript
+</Step>
+
+<Step number={4} title="تعيين نوع قوي لمفاتيح الترجمة باستخدام TypeScript">
 
 قم بتعزيز `i18next` للإشارة إلى ملفات اللغة الرسمية الخاصة بك (عادةً الإنجليزية). يقوم TypeScript بعد ذلك باستنتاج المفاتيح الصحيحة لكل مساحة أسماء، بحيث يتم التحقق من استدعاءات `t()` بشكل كامل.
 
@@ -240,7 +248,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### الخطوة 5: إعداد تهيئة i18n على جانب الخادم
+</Step>
+
+<Step number={5} title="إعداد تهيئة i18n على جانب الخادم">
 
 قم بإنشاء دالة تهيئة على جانب الخادم تقوم بتحميل الترجمات لمكونات الخادم. تنشئ هذه الدالة نسخة منفصلة من i18next للعرض على جانب الخادم، مما يضمن تحميل الترجمات قبل العرض.
 
@@ -295,7 +305,9 @@ export async function initI18next(
 }
 ```
 
-### الخطوة 6: إنشاء مزود i18n على جانب العميل
+</Step>
+
+<Step number={6} title="إنشاء مزود i18n على جانب العميل">
 
 قم بإنشاء مزود مكون للعميل يلف تطبيقك بسياق i18next. يستقبل هذا المزود الترجمات المحملة مسبقًا من الخادم لمنع وميض المحتوى غير المترجم (FOUC) وتجنب جلب البيانات المكرر.
 
@@ -378,7 +390,9 @@ export default function I18nProvider({
 }
 ```
 
-### الخطوة 7: تعريف مسارات اللغات الديناميكية
+</Step>
+
+<Step number={7} title="تعريف مسارات اللغات الديناميكية">
 
 قم بإعداد التوجيه الديناميكي للغات عن طريق إنشاء مجلد `[locale]` في مجلد التطبيق الخاص بك. هذا يسمح لـ Next.js بالتعامل مع التوجيه بناءً على اللغة حيث تصبح كل لغة جزءًا من عنوان URL (مثل `/en/about`، `/fr/about`).
 
@@ -430,7 +444,9 @@ export default function LocaleLayout({
 }
 ```
 
-### الخطوة 8: إنشاء ملفات الترجمة الخاصة بك
+</Step>
+
+<Step number={8} title="إنشاء ملفات الترجمة الخاصة بك">
 
 قم بإنشاء ملفات JSON لكل لغة ومساحة أسماء. تتيح لك هذه البنية تنظيم الترجمات بشكل منطقي وتحميل ما تحتاجه فقط لكل صفحة.
 
@@ -484,7 +500,9 @@ export default function LocaleLayout({
 }
 ```
 
-### الخطوة 9: استخدام الترجمات في صفحاتك
+</Step>
+
+<Step number={9} title="استخدام الترجمات في صفحاتك">
 
 قم بإنشاء مكون صفحة يقوم بتهيئة i18next على الخادم ويمرر الترجمات إلى مكونات الخادم والعميل على حد سواء. هذا يضمن تحميل الترجمات قبل العرض ويمنع وميض المحتوى.
 
@@ -544,7 +562,9 @@ export default async function AboutPage({
 }
 ```
 
-### الخطوة 10: استخدام الترجمات في مكونات العميل
+</Step>
+
+<Step number={10} title="استخدام الترجمات في مكونات العميل">
 
 يمكن لمكونات العميل استخدام الخطاف `useTranslation` للوصول إلى الترجمات. يوفر هذا الخطاف الوصول إلى دالة الترجمة ومثيل i18n، مما يتيح لك ترجمة المحتوى والوصول إلى معلومات اللغة.
 
@@ -595,7 +615,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### الخطوة 11: استخدام الترجمات في مكونات الخادم
+</Step>
+
+<Step number={11} title="استخدام الترجمات في مكونات الخادم">
 
 لا يمكن لمكونات الخادم استخدام React hooks، لذلك تستقبل الترجمات عبر props من مكونات الوالد الخاصة بها. هذه الطريقة تحافظ على تزامن مكونات الخادم وتسمح بتضمينها داخل مكونات العميل.
 
@@ -641,9 +663,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (اختياري) الخطوة 12: تغيير لغة المحتوى الخاص بك
+<Step number={12} title="تغيير لغة المحتوى الخاص بك" isOptional={true}>
 
 لتغيير لغة المحتوى الخاص بك في Next.js، الطريقة الموصى بها هي استخدام عناوين URL التي تحتوي على بادئة locale وروابط Next.js. المثال أدناه يقرأ locale الحالي من المسار، ويزيله من اسم المسار، ويعرض رابطًا واحدًا لكل locale متاح.
 
@@ -715,7 +737,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (اختياري) الخطوة 13: بناء مكون رابط محلي
+</Step>
+
+<Step number={13} title="بناء مكون رابط محلي" isOptional={true}>
 
 إعادة استخدام عناوين URL المحلية عبر تطبيقك يحافظ على اتساق التنقل وصديق لمحركات البحث (SEO). قم بتغليف `next/link` في مساعد صغير يضيف بادئة للمسارات الداخلية باستخدام اللغة النشطة مع ترك عناوين URL الخارجية بدون تغيير.
 
@@ -766,7 +790,9 @@ export default function LocalizedLink({
 
 > نصيحة: نظرًا لأن `LocalizedLink` هو بديل جاهز، قم بالترحيل تدريجيًا عن طريق تبديل الاستيرادات وترك المكون يتعامل مع عناوين URL الخاصة باللغات.
 
-### (اختياري) الخطوة 14: الوصول إلى اللغة النشطة داخل Server Actions
+</Step>
+
+<Step number={14} title="الوصول إلى اللغة النشطة داخل Server Actions" isOptional={true}>
 
 غالبًا ما تحتاج Server Actions إلى اللغة الحالية للبريد الإلكتروني أو التسجيل أو التكامل مع أطراف ثالثة. قم بدمج ملف تعريف الارتباط الخاص باللغة الذي يحدده البروكسي الخاص بك مع رأس `Accept-Language` كخيار احتياطي.
 
@@ -804,7 +830,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > نظرًا لأن المساعد يعتمد على ملفات تعريف الارتباط (cookies) ورؤوس (headers) Next.js، فإنه يعمل في معالجات المسارات (Route Handlers)، والإجراءات الخادمة (Server Actions)، وسياقات الخادم فقط الأخرى.
 
-### (اختياري) الخطوة 15: تدويل بيانات التعريف الخاصة بك
+</Step>
+
+<Step number={15} title="تدويل بيانات التعريف الخاصة بك" isOptional={true}>
 
 ترجمة المحتوى أمر مهم، لكن الهدف الرئيسي من التدويل هو جعل موقعك الإلكتروني أكثر ظهورًا للعالم. التدويل (I18n) هو رافعة مذهلة لتحسين ظهور موقعك الإلكتروني من خلال تحسين محركات البحث (SEO) بشكل صحيح.
 
@@ -871,7 +899,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (اختياري) الخطوة 16: تعريب خريطة الموقع الخاصة بك
+</Step>
+
+<Step number={16} title="تعريب خريطة الموقع الخاصة بك" isOptional={true}>
 
 قم بإنشاء خريطة موقع تتضمن جميع إصدارات اللغات لصفحاتك. هذا يساعد محركات البحث على اكتشاف وفهرسة جميع إصدارات اللغات لمحتواك.
 
@@ -925,7 +955,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (اختياري) الخطوة 17: تعريب ملف robots.txt الخاص بك
+</Step>
+
+<Step number={17} title="تعريب ملف robots.txt الخاص بك" isOptional={true}>
 
 قم بإنشاء ملف robots.txt يتعامل بشكل صحيح مع جميع إصدارات اللغات لمساراتك المحمية. هذا يضمن أن محركات البحث لا تقوم بفهرسة صفحات المسؤول أو لوحة التحكم بأي لغة.
 
@@ -956,7 +988,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (اختياري) الخطوة 18: إعداد Middleware لتوجيه اللغة
+</Step>
+
+<Step number={18} title="إعداد Middleware لتوجيه اللغة" isOptional={true}>
 
 قم بإنشاء وكيل (proxy) لاكتشاف اللغة المفضلة للمستخدم تلقائيًا وإعادة توجيهه إلى عنوان URL مع بادئة اللغة المناسبة. هذا يحسن تجربة المستخدم من خلال عرض المحتوى بلغته المفضلة.
 
@@ -1045,7 +1079,9 @@ export const config = {
 };
 ```
 
-### (اختياري) الخطوة 19: أتمتة ترجماتك باستخدام Intlayer
+</Step>
+
+<Step number={19} title="أتمتة ترجماتك باستخدام Intlayer" isOptional={true}>
 
 Intlayer هي مكتبة **مجانية** و**مفتوحة المصدر** مصممة لمساعدتك في عملية التوطين في تطبيقك. بينما يتولى i18next تحميل الترجمات وإدارتها، يساعد Intlayer في أتمتة سير عمل الترجمة.
 
@@ -1075,3 +1111,7 @@ Intlayer هي مكتبة **مجانية** و**مفتوحة المصدر** مصم
   يقدم Intlayer محررًا مرئيًا مجانيًا لتحرير محتواك باستخدام محرر مرئي. تعرّف على المزيد حول [التحرير المرئي لترجماتك](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md).
 
 والمزيد. لاكتشاف جميع الميزات التي يوفرها Intlayer، يرجى الرجوع إلى [أهمية توثيق Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/ar/i18n_using_next-intl.md

@@ -110,7 +110,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام npm:
 
@@ -128,7 +130,9 @@ yarn add next-intl
 
 - **next-intl**: مكتبة التدويل الأساسية لـ Next.js App Router التي توفر الخطافات، وظائف الخادم، ومزودي العميل لإدارة الترجمات.
 
-### الخطوة 2: تكوين مشروعك
+</Step>
+
+<Step number={2} title="تكوين مشروعك">
 
 قم بإنشاء ملف تكوين يحدد اللغات المدعومة لديك ويضبط إعدادات طلب next-intl. يعمل هذا الملف كمصدر وحيد للحقيقة لإعداد i18n الخاص بك ويضمن سلامة الأنواع عبر تطبيقك.
 
@@ -213,7 +217,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### الخطوة 3: تعريف مسارات اللغات الديناميكية
+</Step>
+
+<Step number={3} title="تعريف مسارات اللغات الديناميكية">
 
 قم بإعداد التوجيه الديناميكي للغات من خلال إنشاء مجلد `[locale]` داخل مجلد التطبيق الخاص بك. يتيح هذا لـ Next.js التعامل مع التوجيه بناءً على اللغة حيث يصبح كل لغة جزءًا من عنوان URL (مثل `/en/about`، `/fr/about`).
 
@@ -301,7 +307,9 @@ export default async function AboutPage({
 }
 ```
 
-### الخطوة 4: إنشاء ملفات الترجمة الخاصة بك
+</Step>
+
+<Step number={4} title="إنشاء ملفات الترجمة الخاصة بك">
 
 قم بإنشاء ملفات JSON لكل لغة ومساحة أسماء. تتيح لك هذه البنية تنظيم الترجمات بشكل منطقي وتحميل ما تحتاجه فقط لكل صفحة.
 
@@ -343,7 +351,9 @@ export default async function AboutPage({
 }
 ```
 
-### الخطوة 5: استخدام الترجمات في صفحاتك
+</Step>
+
+<Step number={5} title="استخدام الترجمات في صفحاتك">
 
 قم بإنشاء مكون صفحة يقوم بتحميل الترجمات على الخادم ويمررها إلى مكونات الخادم والعميل على حد سواء. هذا يضمن تحميل الترجمات قبل العرض ويمنع وميض المحتوى.
 
@@ -394,7 +404,9 @@ export default async function AboutPage({
 }
 ```
 
-### الخطوة 6: استخدام الترجمات في مكونات العميل
+</Step>
+
+<Step number={6} title="استخدام الترجمات في مكونات العميل">
 
 يمكن لمكونات العميل استخدام الخطافات `useTranslations` و `useFormatter` للوصول إلى الترجمات ووظائف التنسيق. هذه الخطافات تقرأ من سياق `NextIntlClientProvider`.
 
@@ -430,7 +442,9 @@ const ClientComponent = () => {
 };
 ```
 
-### الخطوة 7: استخدام الترجمات في مكونات الخادم
+</Step>
+
+<Step number={7} title="استخدام الترجمات في مكونات الخادم">
 
 لا يمكن لمكونات الخادم استخدام React hooks، لذا فإنها تستقبل الترجمات وأدوات التنسيق عبر props من مكونات الوالد الخاصة بها. هذه الطريقة تحافظ على تزامن مكونات الخادم وتسمح بتضمينها داخل مكونات العميل.
 
@@ -462,9 +476,9 @@ const ServerComponent = ({
 
 > في صفحتك/التخطيط، استخدم `getTranslations` و `getFormatter` من `next-intl/server` لحساب الترجمات والتنسيقات مسبقًا، ثم مررها كخصائص إلى مكونات الخادم.
 
----
+</Step>
 
-### (اختياري) الخطوة 8: تغيير لغة المحتوى الخاص بك
+<Step number={8} title="تغيير لغة المحتوى الخاص بك" isOptional={true}>
 
 لتغيير لغة المحتوى الخاص بك باستخدام next-intl، قم بعرض روابط تدرك اللغة تشير إلى نفس مسار الصفحة مع تبديل اللغة. يقوم المزود بإعادة كتابة عناوين URL تلقائيًا، لذلك عليك فقط استهداف المسار الحالي.
 
@@ -536,7 +550,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (اختياري) الخطوة 9: استخدام مكون الرابط المحلي
+</Step>
+
+<Step number={9} title="استخدام مكون الرابط المحلي" isOptional={true}>
 
 يوفر `next-intl` حزمة فرعية `next-intl/navigation` تحتوي على مكون رابط محلي يقوم تلقائيًا بتطبيق اللغة النشطة. لقد قمنا باستخراجه لك بالفعل في ملف `@/i18n`، لذا يمكنك استخدامه كما يلي:
 
@@ -546,7 +562,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (اختياري) الخطوة 10: الوصول إلى اللغة النشطة داخل Server Actions
+</Step>
+
+<Step number={10} title="الوصول إلى اللغة النشطة داخل Server Actions" isOptional={true}>
 
 يمكن لـ Server Actions قراءة اللغة الحالية باستخدام `next-intl/server`. هذا مفيد لإرسال رسائل بريد إلكتروني محلية أو تخزين تفضيلات اللغة جنبًا إلى جنب مع البيانات المقدمة.
 
@@ -569,7 +587,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` يقرأ اللغة التي تم تعيينها بواسطة وكيل `next-intl`، لذا فهو يعمل في أي مكان على الخادم: معالجات المسارات، إجراءات الخادم، ودوال الحافة.
 
-### (اختياري) الخطوة 11: تعريب بيانات التعريف الخاصة بك
+</Step>
+
+<Step number={11} title="تعريب بيانات التعريف الخاصة بك" isOptional={true}>
 
 ترجمة المحتوى أمر مهم، لكن الهدف الرئيسي من التدويل هو جعل موقعك الإلكتروني أكثر ظهورًا للعالم. التدويل (I18n) هو أداة قوية لتحسين ظهور موقعك الإلكتروني من خلال تحسين محركات البحث (SEO) بشكل صحيح.
 
@@ -608,7 +628,9 @@ export async function generateMetadata({
 // ... بقية كود الصفحة
 ```
 
-### (اختياري) الخطوة 12: تعريب خريطة الموقع الخاصة بك
+</Step>
+
+<Step number={12} title="تعريب خريطة الموقع الخاصة بك" isOptional={true}>
 
 قم بإنشاء خريطة موقع تتضمن جميع إصدارات اللغات المختلفة لصفحاتك. يساعد هذا محركات البحث على اكتشاف وفهرسة جميع إصدارات اللغات لمحتواك.
 
@@ -662,7 +684,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (اختياري) الخطوة 13: تعريب ملف robots.txt الخاص بك
+</Step>
+
+<Step number={13} title="تعريب ملف robots.txt الخاص بك" isOptional={true}>
 
 قم بإنشاء ملف robots.txt يتعامل بشكل صحيح مع جميع إصدارات اللغات لمساراتك المحمية. هذا يضمن أن محركات البحث لا تقوم بفهرسة صفحات الإدارة أو لوحة التحكم بأي لغة.
 
@@ -695,7 +719,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (اختياري) الخطوة 14: إعداد Proxy لتوجيه اللغة
+</Step>
+
+<Step number={14} title="إعداد Proxy لتوجيه اللغة" isOptional={true}>
 
 قم بإنشاء Proxy لاكتشاف اللغة المفضلة للمستخدم تلقائيًا وإعادة توجيهه إلى عنوان URL المناسب مع بادئة اللغة. توفر مكتبة next-intl دالة Proxy مريحة تتولى هذا الأمر تلقائيًا.
 
@@ -715,7 +741,9 @@ export const config = {
 };
 ```
 
-### (اختياري) الخطوة 15: إعداد أنواع TypeScript للغة
+</Step>
+
+<Step number={15} title="إعداد أنواع TypeScript للغة" isOptional={true}>
 
 سيساعدك إعداد TypeScript في الحصول على الإكمال التلقائي وضمان سلامة الأنواع لمفاتيحك.
 
@@ -741,7 +769,9 @@ declare module "next-intl" {
 
 سيستخدم هذا الكود Module Augmentation لإضافة اللغات والرسائل إلى نوع AppConfig الخاص بـ next-intl.
 
-### (اختياري) الخطوة 15: أتمتة ترجماتك باستخدام Intlayer
+</Step>
+
+<Step number={16} title="أتمتة ترجماتك باستخدام Intlayer" isOptional={true}>
 
 Intlayer هي مكتبة **مجانية** و**مفتوحة المصدر** مصممة لمساعدتك في عملية التوطين في تطبيقك. بينما يتولى next-intl تحميل الترجمات وإدارتها، يساعد Intlayer في أتمتة سير عمل الترجمة.
 
@@ -773,3 +803,7 @@ Intlayer هي مكتبة **مجانية** و**مفتوحة المصدر** مصم
   تقدم Intlayer محررًا مرئيًا مجانيًا لتحرير المحتوى الخاص بك باستخدام محرر مرئي. تعرّف على المزيد حول [التحرير المرئي لترجماتك](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md).
 
 والمزيد. لاكتشاف جميع الميزات التي تقدمها Intlayer، يرجى الرجوع إلى [أهمية وثائق Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/de/i18n_using_next-i18next.md

@@ -82,6 +82,7 @@ Bevor wir in die Implementierung einsteigen, hier einige Praktiken, die Sie befo
   title="Demo CodeSandbox - Wie Sie Ihre Anwendung mit Intlayer internationalisieren"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Siehe [Application Template](https://github.com/aymericzip/next-i18next-template) auf GitHub.
 
@@ -118,7 +119,9 @@ Hier ist die Projektstruktur, die wir erstellen werden:
         └── ServerComponent.tsx
 ```
 
-### Schritt 1: Abhängigkeiten installieren
+<Steps>
+
+<Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die notwendigen Pakete mit npm:
 
@@ -138,7 +141,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: React-Bindings für i18next, die Hooks wie `useTranslation` für Client-Komponenten bereitstellen.
 - **i18next-resources-to-backend**: Ein Plugin, das das dynamische Laden von Übersetzungsdateien ermöglicht, sodass Sie nur die benötigten Namespaces laden können.
 
-### Schritt 2: Konfigurieren Sie Ihr Projekt
+</Step>
+
+<Step number={2} title="Konfigurieren Sie Ihr Projekt">
 
 Erstellen Sie eine Konfigurationsdatei, um Ihre unterstützten Sprachen, die Standardsprache und Hilfsfunktionen für die URL-Lokalisierung zu definieren. Diese Datei dient als einzige Quelle der Wahrheit für Ihre i18n-Einrichtung und gewährleistet Typensicherheit in Ihrer gesamten Anwendung.
 
@@ -191,7 +196,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Schritt 3: Übersetzungs-Namespaces zentralisieren
+</Step>
+
+<Step number={3} title="Übersetzungs-Namespaces zentralisieren">
 
 Erstellen Sie eine einzige Quelle der Wahrheit für jeden Namespace, den Ihre Anwendung bereitstellt. Die Wiederverwendung dieser Liste hält Server-, Client- und Tooling-Code synchron und ermöglicht eine starke Typisierung für Übersetzungshilfen.
 
@@ -201,7 +208,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Schritt 4: Starke Typisierung der Übersetzungsschlüssel mit TypeScript
+</Step>
+
+<Step number={4} title="Starke Typisierung der Übersetzungsschlüssel mit TypeScript">
 
 Erweitern Sie `i18next`, um auf Ihre kanonischen Sprachdateien (normalerweise Englisch) zu verweisen. TypeScript leitet dann gültige Schlüssel pro Namespace ab, sodass Aufrufe von `t()` durchgängig überprüft werden.
 
@@ -239,7 +248,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Schritt 5: Serverseitige i18n-Initialisierung einrichten
+</Step>
+
+<Step number={5} title="Serverseitige i18n-Initialisierung einrichten">
 
 Erstellen Sie eine serverseitige Initialisierungsfunktion, die Übersetzungen für Server-Komponenten lädt. Diese Funktion erstellt eine separate i18next-Instanz für das serverseitige Rendering und stellt sicher, dass die Übersetzungen vor dem Rendern geladen werden.
 
@@ -294,7 +305,9 @@ export async function initI18next(
 }
 ```
 
-### Schritt 6: Erstellen des Client-seitigen i18n Providers
+</Step>
+
+<Step number={6} title="Erstellen des Client-seitigen i18n Providers">
 
 Erstellen Sie einen Client-Komponenten-Provider, der Ihre Anwendung mit dem i18next-Kontext umschließt. Dieser Provider erhält vorab geladene Übersetzungen vom Server, um ein Aufblitzen nicht übersetzter Inhalte (FOUC) zu verhindern und doppelte Abrufe zu vermeiden.
 
@@ -377,7 +390,9 @@ export default function I18nProvider({
 }
 ```
 
-### Schritt 7: Definieren dynamischer Locale-Routen
+</Step>
+
+<Step number={7} title="Definieren dynamischer Locale-Routen">
 
 Richte dynamisches Routing für Locales ein, indem du im App-Ordner ein Verzeichnis `[locale]` erstellst. Dadurch kann Next.js locale-basiertes Routing handhaben, bei dem jede Locale ein URL-Segment wird (z. B. `/en/about`, `/fr/about`).
 
@@ -429,7 +444,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Schritt 8: Erstellen Sie Ihre Übersetzungsdateien
+</Step>
+
+<Step number={8} title="Erstellen Sie Ihre Übersetzungsdateien">
 
 Erstellen Sie JSON-Dateien für jede Locale und jeden Namespace. Diese Struktur ermöglicht es Ihnen, Übersetzungen logisch zu organisieren und nur das zu laden, was Sie für jede Seite benötigen.
 
@@ -522,7 +539,9 @@ Organisieren von Übersetzungen nach Namespace (z. B. `common.json`, `about.json
 }
 ```
 
-### Schritt 9: Übersetzungen in Ihren Seiten verwenden
+</Step>
+
+<Step number={9} title="Übersetzungen in Ihren Seiten verwenden">
 
 Erstellen Sie eine Seitenkomponente, die i18next auf dem Server initialisiert und Übersetzungen sowohl an Server- als auch an Client-Komponenten übergibt. Dies stellt sicher, dass Übersetzungen vor dem Rendern geladen werden und verhindert das Aufblitzen von Inhalten.
 
@@ -582,7 +601,9 @@ export default async function AboutPage({
 }
 ```
 
-### Schritt 10: Übersetzungen in Client-Komponenten verwenden
+</Step>
+
+<Step number={10} title="Übersetzungen in Client-Komponenten verwenden">
 
 Client-Komponenten können den `useTranslation` Hook verwenden, um auf Übersetzungen zuzugreifen. Dieser Hook bietet Zugriff auf die Übersetzungsfunktion und die i18n-Instanz, wodurch Sie Inhalte übersetzen und auf Locale-Informationen zugreifen können.
 
@@ -633,7 +654,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Schritt 11: Übersetzungen in Server-Komponenten verwenden
+</Step>
+
+<Step number={11} title="Übersetzungen in Server-Komponenten verwenden">
 
 Server-Komponenten können keine React-Hooks verwenden, daher erhalten sie Übersetzungen über Props von ihren übergeordneten Komponenten. Dieser Ansatz hält Server-Komponenten synchron und ermöglicht es, sie innerhalb von Client-Komponenten zu verschachteln.
 
@@ -679,9 +702,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Optional) Schritt 12: Ändern Sie die Sprache Ihres Inhalts
+<Step number={12} title="Ändern Sie die Sprache Ihres Inhalts" isOptional={true}>
 
 Um die Sprache Ihres Inhalts in Next.js zu ändern, wird empfohlen, URLs mit Sprachpräfix und Next.js-Links zu verwenden. Das folgende Beispiel liest die aktuelle Sprache aus der Route aus, entfernt sie aus dem Pfadnamen und rendert einen Link pro verfügbarer Sprache.
 
@@ -753,7 +776,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optional) Schritt 13: Erstellen einer lokalisierten Link-Komponente
+</Step>
+
+<Step number={13} title="Erstellen einer lokalisierten Link-Komponente" isOptional={true}>
 
 Die Wiederverwendung lokalisierter URLs in Ihrer App sorgt für eine konsistente Navigation und ist SEO-freundlich. Verpacken Sie `next/link` in einem kleinen Helfer, der interne Routen mit der aktiven Locale voranstellt, während externe URLs unverändert bleiben.
 
@@ -804,7 +829,9 @@ export default function LocalizedLink({
 
 > Tipp: Da `LocalizedLink` ein Drop-in-Ersatz ist, migrieren Sie schrittweise, indem Sie Importe austauschen und die Komponente die sprachspezifischen URLs verwalten lassen.
 
-### (Optional) Schritt 14: Zugriff auf die aktive Locale innerhalb von Server Actions
+</Step>
+
+<Step number={14} title="Zugriff auf die aktive Locale innerhalb von Server Actions" isOptional={true}>
 
 Server Actions benötigen oft die aktuelle Locale für E-Mails, Protokollierung oder Integrationen von Drittanbietern. Kombinieren Sie das von Ihrem Proxy gesetzte Locale-Cookie mit dem `Accept-Language`-Header als Fallback.
 
@@ -842,7 +869,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Da der Helfer auf Next.js-Cookies und -Headern basiert, funktioniert er in Route Handlers, Server Actions und anderen serverseitigen Kontexten.
 
-### (Optional) Schritt 15: Internationalisieren Sie Ihre Metadaten
+</Step>
+
+<Step number={15} title="Internationalisieren Sie Ihre Metadaten" isOptional={true}>
 
 Die Übersetzung von Inhalten ist wichtig, aber das Hauptziel der Internationalisierung ist es, Ihre Website für die Welt sichtbarer zu machen. I18n ist ein unglaublicher Hebel, um die Sichtbarkeit Ihrer Website durch richtiges SEO zu verbessern.
 
@@ -909,7 +938,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Optional) Schritt 16: Internationalisieren Sie Ihre Sitemap
+</Step>
+
+<Step number={16} title="Internationalisieren Sie Ihre Sitemap" isOptional={true}>
 
 Erstellen Sie eine Sitemap, die alle Lokalisierungsversionen Ihrer Seiten enthält. Dies hilft Suchmaschinen, alle Sprachversionen Ihrer Inhalte zu entdecken und zu indexieren.
 
@@ -963,7 +994,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optional) Schritt 17: Internationalisieren Sie Ihre robots.txt
+</Step>
+
+<Step number={17} title="Internationalisieren Sie Ihre robots.txt" isOptional={true}>
 
 Erstellen Sie eine robots.txt-Datei, die alle Sprachversionen Ihrer geschützten Routen korrekt behandelt. Dies stellt sicher, dass Suchmaschinen keine Admin- oder Dashboard-Seiten in irgendeiner Sprache indexieren.
 
@@ -994,7 +1027,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optional) Schritt 18: Middleware für Locale Routing einrichten
+</Step>
+
+<Step number={18} title="Middleware für Locale Routing einrichten" isOptional={true}>
 
 Erstellen Sie einen Proxy, der automatisch die bevorzugte Sprache des Benutzers erkennt und ihn zur entsprechenden URL mit Sprachpräfix weiterleitet. Dies verbessert die Benutzererfahrung, indem Inhalte in der bevorzugten Sprache angezeigt werden.
 
@@ -1083,7 +1118,9 @@ export const config = {
 };
 ```
 
-### (Optional) Schritt 19: Automatisieren Sie Ihre Übersetzungen mit Intlayer
+</Step>
+
+<Step number={19} title="Automatisieren Sie Ihre Übersetzungen mit Intlayer" isOptional={true}>
 
 Intlayer ist eine **kostenlose** und **Open-Source**-Bibliothek, die den Lokalisierungsprozess in Ihrer Anwendung unterstützt. Während i18next das Laden und Verwalten von Übersetzungen übernimmt, hilft Intlayer dabei, den Übersetzungsworkflow zu automatisieren.
 
@@ -1113,3 +1150,7 @@ Intlayer ermöglicht Ihnen:
   Intlayer bietet einen kostenlosen visuellen Editor, um Ihre Inhalte visuell zu bearbeiten. Erfahren Sie mehr über das [visuelle Bearbeiten Ihrer Übersetzungen](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md).
 
 Und mehr. Um alle von Intlayer bereitgestellten Funktionen zu entdecken, lesen Sie bitte die [Interessen der Intlayer-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>