الترجمة والتعدد اللغوي

أضف دعم تعدد اللغات إلى تطبيقك. استخدم Proyecta Content API لترجمة المحتوى التحريري، أو اطلب من الذكاء الاصطناعي ربط إطار عمل i18n مباشرةً في الكود.

يدعم Proyecta نهجَين متكاملَين لتدويل التطبيقات التي تبنيها:

1. ترجمة المحتوى عبر Proyecta Content API — للمحتوى التحريري (مقالات المدونة، الأسئلة الشائعة، النصوص التسويقية) الذي يحتاج إلى ترجمة إلى لغات متعددة
2. إطار عمل i18n على مستوى الكود — لنصوص واجهة المستخدم والتواريخ والعملات وتبديل اللغة في وقت التشغيل

كلا الخيارَين متاحان الآن. ما تختاره يعتمد على ما تريد ترجمته.

يأتي Proyecta نفسه مع دعم 24 لغةً، لذا فهو يتقن التعامل مع i18n. وتنطبق الأنماط نفسها على التطبيقات التي تبنيها بداخله.

الخيار الأول: ترجمة المحتوى (Proyecta Content API)

إذا كنت تبني موقعاً يعتمد على المحتوى بشكل كبير — مدونة، أو قاعدة معرفة، أو صفحات تسويقية، أو كتالوج منتجات — فاستخدم دعم اللغات المدمج. أخبر الذكاء الاصطناعي باللغات التي تدعمها ("Make the site available in English, Spanish and French") وسيسجّلها لك، مع الإنجليزية كلغة افتراضية. ثم استرجع محتواك بلغة الزائر.

على الواجهة الأمامية، تقوم hooks المحتوى المكتوبة بنوع محدد في القالب بحل الحقول المترجمة تلقائياً — مرّر اللغة النشطة للزائر وسيعود كل حقل localized بقيمة مترجمة واحدة:

import { useCollection, useEntry } from '@/hooks/useContent';
import { useTranslation } from 'react-i18next';

function Blog({ slug }: { slug: string }) {
    const { i18n } = useTranslation();

    // List a collection in the current locale
    const { data: posts } = useCollection('posts', { locale: i18n.language });

    // Or read one entry by slug in the current locale
    const { data: post } = useEntry('posts', slug, { locale: i18n.language });

    // ...render posts / post
}

خلف الكواليس، يسير نظام إدارة المحتوى عبر سلسلة احتياطية — اللغة المطلوبة ← اللغات الاحتياطية المُعدَّة لها ← اللغة الافتراضية — ويُبلّغ عن الكود الذي خدم به الطلب فعلياً في كل مدخل من خلال localeResolved. احذف locale في المواقع أحادية اللغة وستعود الحقول بقيم خام.

هذا هو الخيار المناسب عندما:

• يحتاج المحررون غير التقنيين إلى ترجمة المحتوى
• تريد أن تكون الترجمات قابلة للإصدار
• تحتاج إلى نشر خاص بلغة معينة (النشر المجدول قادم قريباً — تتطلب المدخلات حالياً نشراً يدوياً عبر API)

راجع إدارة المحتوى للاطلاع على Content API الكامل.

الخيار الثاني: إطار عمل i18n على مستوى الكود

لنصوص واجهة المستخدم — التسميات، والأزرار، ورسائل الخطأ، والتواريخ، والعملات — اطلب من الذكاء الاصطناعي ربط إطار عمل i18n مباشرةً في مشروعك:

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

سيقوم الذكاء الاصطناعي بما يلي:

1. اختيار إطار عمل — يستخدم الذكاء الاصطناعي i18next مع react-i18next (المعيار الخاص بـ Proyecta)
2. إنشاء ملفات الكتالوج في src/locales/ (ملف JSON واحد لكل لغة)
3. تغليف النصوص في استدعاءات t() (من hook الخاصة بـ useTranslation في react-i18next)
4. إضافة مكوّن لتبديل اللغة
5. ربط مسارات URL بادئات اللغة
6. معالجة تخطيطات RTL (dir="rtl") للعربية والعبرية وغيرها
7. تنسيق الأرقام والتواريخ والعملات وفق اللغة المحددة

الترجمة التلقائية بالذكاء الاصطناعي

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

• "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
• "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

بالنسبة للمحتوى البالغ الأهمية (النصوص القانونية، والطبية، والمالية)، اطلب من مترجم بشري مراجعة مخرجات الذكاء الاصطناعي قبل النشر.

الجمع بين النهجَين

تستخدم معظم التطبيقات الحقيقية النهجَين معاً: إطار عمل i18n على مستوى الكود لعناصر واجهة المستخدم الثابتة (الأزرار، والأخطاء، والتنقل)، و Content API للمحتوى التحريري (المقالات، وأوصاف المنتجات). يتعايشان بشكل نظيف — يتعامل إطار عمل i18n مع ملفات الكتالوج في وقت البناء، فيما تخدم Content API المدخلات المترجمة في وقت التشغيل.

أفضل الممارسات

1. حدد لغتك الأساسية وأنهِ كتابة النصوص أولاً. ترجمة هدف متحرك أمر مؤلم.
2. اجمع الترجمات على دفعات. لا تترجم أثناء التطوير — انتظر حتى تستقر الميزة.
3. اختبر RTL مبكراً إذا كنت تدعم العربية أو العبرية. أخطاء RTL لا تظهر حتى تنظر إليها فعلاً.
4. أدرج lang وdir على <html>. المتصفحات وقارئات الشاشة تعتمد عليهما.
5. استخدم Intl للتنسيق. لا تكتب كود تنسيق التواريخ أو العملات يدوياً — استخدم Intl.DateTimeFormat وIntl.NumberFormat.

قريباً

• واجهة إدارة اللغات داخل Builder — اختر اللغات، وراقب نسبة تغطية الترجمة، وعدّل الكتالوجات دون مغادرة Proyecta
• الترجمة التلقائية عند الحفظ للنصوص الجديدة
• قوالب مشاريع جاهزة لـ i18n مع إطار العمل مُهيَّأ مسبقاً