متجر Next.js | shopify يدعم العربية (RTL)
تفاصيل العمل
أقوى نموذج تشغيل لـ Next.js | shopify Commerce عالي الأداء مع دعم كامل لـ RTL (عربي/إنجليزي)، تدويل المواقع (i18n)، وتقييم 100/100 في Lighthouse.
هو نسخة مخصصة تدعم الكتابة من اليمين إلى اليسار (RTL). يسد هذا المشروع الفجوة بين الأداء الخارق للقالب الأصلي والمتطلبات الخاصة بالمتاجر الإلكترونية العربية، دون المساس بالسرعة أو البنية البرمجية.
يوضح هذا المشروع كيفية تنفيذ تدويل المواقع (i18n) وتخطيطات اليمين إلى اليسار مع الالتزام الصارم بأفضل ممارسات مكونات سيرفر ريأكت (RSC) والحفاظ على تقييم 100/100 في Lighthouse.
? الميزات الرئيسية
? دعم أصلي لـ RTL: تعريب كامل للغة العربية مع استخدام خصائص CSS المنطقية (Start/End) لضمان عدم حدوث أي انزياح في المحتوى (Layout Shifts).
⚡ أداء لا يقبل المساومة: الحفاظ على تقييم 100 في Lighthouse. يتم حقن منطق الاتجاه (dir="rtl") في جانب السيرفر لمنع مشاكل التزامن (Hydration mismatches).
?️ تكامل مع Shopify 2.0: متوافق تماماً مع بنية شوبيفاي المنفصلة (Headless Shopify).
? مكونات سيرفر نقية: لا يوجد ثقل في جانب العميل (Client-side) لمنطق الترجمة؛ يتم جلب المحتوى ومعالجته بالكامل على السيرفر.
?️ البنية البرمجية واستراتيجية RTL
يستخدم لومينا استراتيجية عالية الأداء تعتمد على السيرفر لمعالجة اتجاه الصفحة دون أي انزياح بصري (Zero CLS).
? لماذا هذا النموذج المعدل؟
التعامل مع RTL في إصدارات Next.js 14/15 (App Router) قد يكون معقداً. العديد من الحلول تجبرك على استخدام "الرندرة" من جانب العميل أو مكتبات ضخمة تضعف أداء الموقع. يحل لومينا ذلك عبر:
حقن الاتجاه من السيرفر: يحصل وسم <html> على خاصية dir الصحيحة مباشرة من ترويسات السيرفر أو الرابط، مما يضمن أن المتصفح يعرض الاتجاه الصحيح فوراً.
Logical CSS: الاستفادة من خصائص Tailwind المنطقية (مثل ps, pe, ms, me) للحفاظ على كود برمجي واحد يدعم الاتجاهين معاً.