تدويل Next.js: دليل i18n الكامل مع next-intl

يفضل أكثر من 75% من مستخدمي الإنترنت التصفح بلغتهم الأم، وتشهد الشركات التي تقوم بالتوطين معدلات تحويل أعلى بنسبة 70% في الأسواق غير الإنجليزية. يوفر Next.js المدمج مع next-intl إطار عمل قوي للتدويل يتعامل مع التوجيه والترجمات والتنسيق وتحسين محركات البحث عبر أي عدد من اللغات.

الوجبات الرئيسية

• يتكامل next-intl بسلاسة مع جهاز توجيه التطبيقات Next.js ومكونات الخادم
• يحافظ التوجيه ذو البادئات المحلية على نظافة عناوين URL الإنجليزية أثناء إضافة بادئات للغات الأخرى
• تقوم مكونات الخادم بتحميل الترجمات دون تحميل حزمة JavaScript من جانب العميل
• تعد علامات hreflang المناسبة وخرائط الموقع متعددة اللغات ضرورية لتحسين محركات البحث الدولية

---

إعداد المشروع

قم بتثبيت next-intl وتنظيم مشروعك باستخدام دليل i18n الذي يحتوي على routing.ts و navigation.ts و request.ts. ضع تطبيقك ضمن [locale] في جهاز توجيه التطبيقات. قم بتخزين ملفات الترجمة JSON في دليل الرسائل في جذر المشروع.

تكوين التوجيه

حدد التوجيه باستخدام DefineRouting()‎ الذي يحدد صفيف اللغات المحلية، واللغة الافتراضية، واستراتيجية البادئة المحلية. تحذف استراتيجية "حسب الحاجة" البادئة الخاصة باللغة الافتراضية (الإنجليزية) بينما تضيف البادئات /es/، /fr/، /ar/ للآخرين.

قم بإنشاء أغلفة تنقل باستخدام createNavigation(routing) للحصول على وظائف الارتباط، وuseRouter، وusePathname، وإعادة التوجيه. استخدم هذه بدلاً من التنقل الأصلي لـ Next.js في جميع أنحاء تطبيقك.

إعداد البرامج الوسيطة

في Next.js 16، أنشئ ملف proxy.ts (ليحل محل نمط middleware.ts الأقدم). تصدير وظيفة وكيل تم إنشاؤها بواسطة createMiddleware(routing). قم بتكوين المطابق لاستبعاد مسارات API والملفات الثابتة والمسارات _next.

---

ملفات الترجمة

بنية JSON (متداخلة وليست مسطحة)

استخدم المفاتيح المتداخلة المنظمة حسب مساحة الاسم. لا تستخدم مطلقًا المفاتيح المسطحة المفصولة بنقاط مثل "home.title" - فهي تكسر دقة مساحة الاسم التالية. هيكلة الترجمات على النحو التالي:

• شائعة: المصطلحات المشتركة (الأزرار، والعلامات، وحالات التحميل)
• التنقل: عناصر التنقل
• الصفحة الرئيسية: محتوى الصفحة الرئيسية
• حول: حول محتوى الصفحة
• admin.common: مصطلحات الإدارة المشتركة
• admin.products: صفحة إدارة المنتج

مكونات الخادم

استخدم getTranslations("namespace") في مكونات الخادم غير المتزامنة. يؤدي هذا إلى تحميل الترجمات على الخادم دون أي تأثير على حزمة العميل. اتصل بـ t("key") لترجمات السلسلة، وt.rich("key"، {old: (chunks) => ... }) للنص المنسق.

مكونات العميل

استخدم الخطاف useTranslations("namespace") في مكونات العميل المميزة بـ "use client". يوفر الخطاف نفس وظيفة t(). يتم تضمين ترجمات مساحة الاسم النشطة فقط في حزمة العميل.

---

دعم RTL (من اليمين إلى اليسار).

بالنسبة للغات العربية والعبرية والأردية ولغات RTL الأخرى، قم بتعيين dir = "rtl" على عنصر HTML بناءً على اللغة الحالية. في تخطيط الإعدادات المحلية، تحقق مما إذا كانت الإعدادات المحلية موجودة في مصفوفة rtlLocales وقم بتعيين الاتجاه وفقًا لذلك.

استخدم خصائص Tailwind CSS المنطقية (ps، pe، ms، me بدلاً من pl، pr، ml، mr) للتخطيطات التي يتم قلبها تلقائيًا في وضع RTL. قم بتحميل الخطوط المناسبة للبرامج النصية RTL (على سبيل المثال، Noto Sans Arab للغتين العربية والأردية).

---

تحسين محركات البحث: البيانات الوصفية وHreflang

بيانات التعريف الديناميكية

يجب أن تستخدم كل صفحة generatorMetadata() (ليس بيانات تعريف const ثابتة أبدًا) للعناوين والأوصاف وبدائل hreflang التي تتعرف على اللغة. أنشئ كائن Alternatives.languages ​​لتعيين كل لغة إلى مسار URL الخاص بها، بالإضافة إلى إدخال x الافتراضي الذي يشير إلى الإصدار الإنجليزي.

خريطة الموقع متعددة اللغات

قم بإنشاء إدخالات خريطة الموقع لكل صفحة في كل لغة. يجب أن يشتمل كل إدخال على Alternatives.languages ​​التي تعين جميع المتغيرات المحلية. يتيح ذلك لمحركات البحث تقديم إصدار اللغة الصحيح في كل سوق.

علامة تعريف لغة المحتوى

قم بتعيين العلامة الوصفية للغة المحتوى في تخطيط الإعدادات المحلية لديك لمساعدة محركات البحث وبرامج زحف الذكاء الاصطناعي في التعرف على لغة الصفحة. وهذا مهم بشكل خاص لـ Bing ومحركات البحث الناشئة التي تعمل بالذكاء الاصطناعي.

---

سير عمل الترجمة

1. تحرير en.json باعتباره المصدر الوحيد للحقيقة لجميع السلاسل القابلة للترجمة
2. ** تشغيل برنامج الترجمة ** لنشر مفاتيح جديدة لجميع الملفات المحلية (باستخدام Google Translate API أو DeepL للمسودات الأولية)
3. مراجعة الترجمات مع المتحدثين الأصليين للتأكد من الجودة والملاءمة الثقافية
4. اختبر لغات RTL بدقة - تحقق من قلب التخطيط، ومحاذاة النص، ومدخلات النموذج
5. التحقق من تحسين محركات البحث باستخدام أدوات التحقق من الصحة hreflang والاستهداف الدولي لـ Google Search Console

التعامل مع ملفات الترجمة الكبيرة

بالنسبة للتطبيقات التي تحتوي على أكثر من 5000 مفتاح ترجمة، قم بتنظيم ملفات JSON حسب مساحة الاسم لتحسين إمكانية الصيانة. يقوم next-intl بتحميل مساحات الأسماء المطلوبة للصفحة الحالية فقط، مع الحفاظ على الأداء الأمثل.

---

اعتبارات الأداء

• عرض الخادم: يتم تحميل الترجمات على الخادم. لا يتم شحن ترجمة JSON إلى العميل إلا إذا كان المكون أحد مكونات العميل.
• تقسيم مساحة الاسم: يتم تحميل مساحات الأسماء النشطة فقط لكل صفحة، وليس ملف الترجمة بأكمله.
• الإنشاء الثابت: يمكن إنشاء الصفحات التي تستخدم getTranslations() بشكل ثابت في وقت الإنشاء لجميع اللغات.
• حجم الحزمة: تتضمن مكونات العميل ترجمات مساحة الاسم الخاصة بها فقط. تقوم الصفحة التي تستخدم useTranslations("home") بشحن مساحة الاسم "home" فقط.

---

المزالق الشائعة

1. المفاتيح المسطحة: استخدام "home.title" كمفتاح بدلاً من { "home": { "title": "..." } } المتداخل يكسر دقة مساحة الاسم
2. الترجمات المفقودة: قم دائمًا بتوفير السلوك الاحتياطي -- يعرض next-intl اسم المفتاح إذا كانت الترجمة مفقودة، ولكن هذا يبدو معطلاً للمستخدمين
3. السلاسل المشفرة: قم بمراجعة قاعدة التعليمات البرمجية الخاصة بك بحثًا عن أي سلاسل خارج نظام الترجمة
4. تنسيق التاريخ/الأرقام: استخدم تنسيقات intl التالية بدلاً من toLocaleDateString() للحصول على سلوك متسق
5. البيانات الوصفية الثابتة: يؤدي استخدام بيانات تعريف const للتصدير بدلاً من generatorMetadata() إلى منع العناوين والأوصاف التي تتعرف على اللغة

---

الأسئلة المتداولة

س: كم عدد اللغات التي يمكن لـ next-intl التعامل معها؟

لا يوجد حد عملي. يتم تشغيل التطبيقات التي تحتوي على أكثر من 11 لغة وأكثر من 7000+ مفتاح ترجمة دون مشاكل في الأداء. العرض من جانب الخادم يعني أن الترجمات لا تؤدي إلى تضخم حزم العميل.

س: هل يؤثر i18n على أداء تحميل الصفحة؟

مع مكونات الخادم، يتم تحميل الترجمة على الخادم. تأثير الأداء لا يكاد يذكر. تشتمل مكونات العميل على ترجمات مساحة الاسم الخاصة بها فقط، والتي عادةً ما تكون قليلة بالكيلو بايت.

س: كيف نتعامل مع محتوى قاعدة البيانات الديناميكية بلغات متعددة؟

يستخدم نص واجهة المستخدم الثابتة ملفات JSON. يتطلب محتوى قاعدة البيانات (منشورات المدونة، وأوصاف المنتج) تخزين الترجمات في أعمدة أو جداول مخصصة، أو استخدام نظام إدارة المحتوى (CMS) مع سير عمل الترجمة المدمج. تستخدم بعض الفرق مزيجًا مختلطًا: JSON لواجهة المستخدم، وقاعدة بيانات للمحتوى.

س: ماذا عن تنسيق الأرقام والتاريخ؟

يوفر next-intl useFormatter() للتنسيق المحلي للأرقام والعملات والتواريخ والأوقات النسبية. تتبع جميع التنسيقات المعايير الدولية وتحترم الاتفاقيات المحلية تلقائيًا.

---

ما هو التالي

إن التدويل هو استثمار يؤتي ثماره في كل الأسواق غير الإنجليزية. ابدأ باللغات المحلية ذات القيمة الأعلى وقم بالتوسع من هناك.

اتصل بـ ECOSIRE للحصول على مساعدة في تنفيذ i18n، أو استكشف خدمات تنفيذ Odoo لنشر ERP متعدد اللغات.

---

تم النشر بواسطة ECOSIRE - مساعدة الشركات على التوسع باستخدام حلول برمجيات المؤسسات.