كيفية إضافة لغات متعددة إلى تطبيقك أو موقعك

لإضافة لغات متعددة إلى تطبيق، انقل كل نص يظهر للمستخدم إلى ملفات ترجمة (ملف لكل لغة)، وحمّلها بمكتبة i18n، وأضف مبدّل لغة يتذكر اختيار المستخدم. وبالنسبة للصفحات العامة التي تريد العثور عليها في محركات البحث، امنح كل لغة عنواناً خاصاً بها مثل /fr/، واربط النسخ ببعضها بوسوم hreflang. ثم اهتم بالأجزاء التي يغفلها الناس عادةً: التواريخ والأرقام والعملات، والنصوص الأطول في بعض اللغات، والكتابة من اليمين إلى اليسار، والمحتوى المخزَّن في قاعدة بياناتك.

مصطلحات ستسمعها

• التدويل (i18n): تجهيز الكود ليدعم أي لغة، بلا نصوص مكتوبة مباشرة، وتنسيق يراعي اللغة، وتخطيطات مرنة. والرقم "18" يمثل عدد الأحرف بين الحرف i والحرف n.
• التعريب (l10n): تكييف التطبيق للغة أو لسوق محدد، وهو في الغالب ترجمة، وأحياناً يشمل أيضاً العملة والصور والنصوص القانونية.
• اللغة المحلية (Locale): لغة مع منطقة اختيارية، مثل en-GB أو pt-BR.

نفّذ التدويل مرة واحدة، فيصبح إضافة كل لغة جديدة عملاً في الترجمة في الغالب.

الخيارات والمفاضلات

بالنسبة لمعظم التطبيقات، فإن مكتبة i18n قياسية مع ملفات ترجمة هي الأساس الصحيح. يمكنك إنشاء مسودات الترجمة بالترجمة الآلية أو بالذكاء الاصطناعي، ثم يراجع متحدث طليق ما يراه العملاء أكثر من غيره.

أجزاء التطبيق متعدد اللغات

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

بدلاً من <h1>Welcome back</h1>، يكتب الكود t('dashboard.welcome')، ولكل لغة ملف يحمل النص:

{
  "dashboard": {
    "welcome": "مرحباً بعودتك، {{name}}",
    "items_one": "{{count}} عنصر",
    "items_other": "{{count}} عناصر"
  }
}

استخدم المتغيرات (placeholders) بدلاً من ربط أجزاء الجمل، لأن ترتيب الكلمات يختلف بين اللغات. واستخدم قواعد الجمع الخاصة بالمكتبة: الإنجليزية لها صيغتان (عنصر واحد، وعدة عناصر)، لكن بعض اللغات لها ثلاث صيغ أو أكثر.

تنسيق التواريخ والأرقام والمال

لا تنسّقها يدوياً. واجهة Intl المدمجة في المتصفح تنسّق وفق أي لغة: 1,234.5 بالإنجليزية تصبح 1.234,5 بالألمانية، وتتبدل التواريخ بين ترتيب اليوم أولاً وترتيب الشهر أولاً، ويتحرك رمز العملة إلى موضع آخر. خزّن التواريخ بالتوقيت العالمي UTC، والمبالغ كأرقام مع رمز العملة، ونسّقها للعرض فقط.

تخطيط يتمدد

غالباً ما يكون النص المترجم أطول من الإنجليزية، خاصة الألمانية والفنلندية. تجنّب الأزرار ذات العرض الثابت والتسميات المقصوصة، واختبر بأطول لغة لديك.

اللغات المكتوبة من اليمين إلى اليسار

العربية والعبرية والفارسية والأردية تُكتب من اليمين إلى اليسار. اضبط dir="rtl" على الصفحة لتلك اللغات، واستخدم الخصائص المنطقية في CSS (margin-inline-start بدلاً من margin-left؛ وفي Tailwind، ms-4 بدلاً من ml-4) حتى يتعكس التخطيط تلقائياً. والأيقونات التي تحمل اتجاهاً، مثل الأسهم، تحتاج إلى قلبها أيضاً.

مبدّل اللغة والكشف عنها

اعرض مبدّل اللغة في كل صفحة، واكتب اسم كل لغة بلغتها نفسها ("Deutsch"، "Français"، "العربية") بدلاً من الأعلام، لأن الأعلام تمثل دولاً لا لغات. واكشف لغة المتصفح المفضلة في الزيارة الأولى لكي تقترح نسخة مناسبة، لكن اجعل اختيار الزائر الصريح هو الغالب، وتذكّره.

الروابط وتحسين محركات البحث

للصفحات التي تريد ظهورها في نتائج البحث، تحتاج كل لغة إلى عنوان URL خاص بها. واعتباراً من سبتمبر 2026، فإن توجيهات Google للمواقع متعددة اللغات هي:

• عناوين منفصلة لكل لغة: المجلدات الفرعية (example.com/fr/) هي الأبسط، والنطاقات الفرعية ونطاقات الدول تعمل أيضاً. ولا يُنصح بمعاملات العنوان (?lang=fr).
• لا تبدّل اللغة بملف تعريف الارتباط أو بإعدادات المتصفح وحدها، فقد لا يرى زاحف Google النسخ الأخرى أبداً.
• لا تعيد التوجيه تلقائياً حسب اللغة، بل اربط بين النسخ.
• استخدم hreflang لتخبر Google بالصفحات التي هي ترجمات لبعضها. يجب أن تذكر كل نسخة نفسها وكل النسخ الأخرى، وإلا فقد تُتجاهل التعليقات التوضيحية. وأضف x-default لصفحة الاحتياط.
• تكتشف Google لغة الصفحة من محتواها المرئي، لا من lang أو hreflang، لذا ترجم الصفحة كلها، لا القائمة فقط.

ومع ذلك، ضع <html lang="fr"> في كل نسخة: تستخدمه قارئات الشاشة لاختيار النطق الصحيح، وهذا من متطلبات إمكانية الوصول.

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

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

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

• جدول ترجمات: product_translations (product_id, locale, name, description). نظيف، ويتسع للغات كثيرة.
• عمود JSON لكل حقل: name: {"en": "...", "fr": "..."}. أبسط للغات القليلة.

حدد ما يحدث عند غياب ترجمة، فعادةً يُعرض النص باللغة الافتراضية بدلاً من ترك فراغ.

رسائل البريد والإشعارات

خزّن لغة كل مستخدم واستخدمها في البريد الإلكتروني والإشعارات وملفات PDF أيضاً. من السهل ترجمة التطبيق ونسيان أن رسالة الترحيب ما زالت تصل بالإنجليزية.

مطالبات تنجح

أضف التدويل باستخدام react-i18next. انقل كل نص يظهر للمستخدم إلى locales/en.json بمفاتيح مُسمّاة، واستخدم الاستيفاء وقواعد الجمع بدلاً من ربط النصوص، ونسّق التواريخ والأرقام والأسعار باستخدام Intl وفق اللغة الحالية. لا تغيّر أي صياغة بعد.

أضف الفرنسية والألمانية. تحصل صفحات التسويق العامة على بادئات العناوين /fr/ و/de/ مع بقاء الإنجليزية في الجذر، وروابط hreflang في كل صفحة (بما فيها الإشارة الذاتية وx-default)، وضبط html lang لكل صفحة. أضف مبدّل لغة يعرض الاسم الأصلي لكل لغة. وبالنسبة لشاشات تسجيل الدخول، خزّن اللغة في ملف تعريف المستخدم.

أضف العربية مع دعم الكتابة من اليمين إلى اليسار: اضبط dir="rtl" للعربية، واستبدل الهوامش والحشوات اليسرى واليمنى بخصائص منطقية، واقلب الأيقونات الاتجاهية، وتحقق من أن النماذج والجداول ما زالت تُقرأ بشكل صحيح.

خطوة بخطوة

1. اختر أول لغة إضافية بناءً على طلب حقيقي، أي حيث يوجد زوارك أو عملاؤك.
2. دوِّل الكود: انقل النصوص إلى ملفات، وأضف قواعد الجمع وتنسيق Intl. أطلقه بالإنجليزية فقط وتحقق من أن شيئاً لم يتغير.
3. حدد بنية العناوين للصفحات العامة وأضف hreflang.
4. ترجم: أنشئ مسودة بالترجمة الآلية أو بالذكاء الاصطناعي، ثم راجعها مع متحدث طليق. أعطِ المترجمين سياقاً، فكلمة "Book" اسم في شاشة وفعل في شاشة أخرى.
5. ترجم محتوى قاعدة البيانات وحدد الاحتياطات.
6. عرّب الباقي: رسائل البريد، ورسائل الخطأ، والصفحات القانونية، والصور التي تحوي نصاً.
7. اختبر كل لغة بعرض الهاتف، واختبر الكتابة من اليمين إلى اليسار إذا كانت مناسبة.
8. ضع عملية تضمن أن تُشحن الميزات الجديدة مع ترجماتها، لا بعد شهور.

أخطاء شائعة

• ربط الجمل ("You have " + n + " messages")، وهذا يتعطل في اللغات الأخرى.
• نصوص مكتوبة مباشرة تبقى داخل المكونات، وفي رسائل الخطأ وتحقق الإدخال.
• تنسيق التواريخ والأسعار يدوياً.
• أعلام تمثل اللغات، وإعادة توجيه تلقائية تحبس الناس في النسخة الخاطئة.
• عنوان URL واحد لكل اللغات في الصفحات التي تريد فهرستها.
• غياب روابط hreflang المتبادلة، فتتجاهل Google التعليقات التوضيحية.
• ترجمة الواجهة دون المحتوى، أو العكس.
• ترجمة آلية غير مراجَعة في صفحات الأسعار والصفحات القانونية والدفع.

قائمة التحقق متعددة اللغات

• لا توجد نصوص مكتوبة مباشرة يراها المستخدم، وتُستخدم قواعد الجمع والمتغيرات
• التواريخ والأرقام والعملات منسّقة باستخدام Intl
• مبدّل لغة بالأسماء الأصلية في كل صفحة، والاختيار محفوظ
• عناوين منفصلة لكل لغة للصفحات العامة، بلا إعادة توجيه إجبارية
• hreflang في كل نسخة، بما فيها الإشارة الذاتية وx-default
• html lang (وdir="rtl" عند الحاجة) مضبوط لكل صفحة
• محتوى قاعدة البيانات مترجم مع احتياطات مناسبة
• رسائل البريد والإشعارات تُرسل بلغة المستخدم
• النص الذي يراه العملاء راجعه متحدث طليق

عدة لغات على Mythex

على Mythex، تضيف اللغات بطلب في الدردشة، فلا توجد لوحة ترجمة منفصلة، لذا تعمل المطالبات أعلاه كما هي. نفّذ خطوة التدويل أولاً وتحقق منها في المعاينة قبل إضافة اللغات، فهي إعادة هيكلة كبيرة، ونقطة الحفظ في الدردشة تمنحك مكاناً للتراجع إذا تعطّل شيء (الدردشة ونقاط الحفظ). وإذا أردت أن يترجم التطبيق المحتوى تلقائياً بالذكاء الاصطناعي أو بواجهة ترجمة، فذلك يستخدم مفتاح واجهة برمجية خاصاً بك، يُحفظ في إعدادات المشروع (متغيرات البيئة والأسرار)، ويشرح كيفية استخدام واجهات LLM التكاليف. انشر من جديد بعد أن تصبح اللغات الجديدة جاهزة.

الأسئلة