دراسة حالة

منصة التجارة الإلكترونية للمؤسسات

استبدلنا منظومة تجارة إلكترونية عمرها عقد بمنصة Next.js headless حققت تحميل صفحات أسرع 3 مرات وزيادة 45% في معدل التحويل.

العميل

GlobalRetail Inc

القطاع

تجارب التسوق المخصصة

التقنية

Next.js, React, Node.js

الجدول الزمني

12 أسبوعًا

نظرة عامة على المشروع

هاجرت ArrayMatic نظام GlobalRetail المتجانس إلى معمارية headless مع Next.js وShopify Plus وCDN مخصص — محققة تحسنًا بنسبة 3× في Core Web Vitals وزيادة 45% في التحويل.

التحدي

كانت منصة GlobalRetail عبارة عن نظام PHP متجانس عمره 10 سنوات. بلغ معدل الارتداد على الهاتف المحمول 68%، وبلغ متوسط مؤشر LCP ‏8.4 ثوانٍ، وكان كل إصدار يتطلب تجميداً لمدة أسبوعين. كان فريق التطوير يقضي 60% من وقت السباق في الصيانة، مما لم يترك مجالاً يُذكر للميزات الجديدة.

نهجنا

انتقلنا إلى بنية بدون رأس: Next.js 15 في الواجهة الأمامية مع إعادة التوليد الثابت التدريجي، وطبقة واجهة برمجة تطبيقات تجارة بدون رأس، و Cloudflare للتخزين المؤقت على الحافة. تمت معالجة صور المنتجات عبر خط أنابيب Next/Image مخصص مع تحويل تلقائي إلى WebP. تم تفكيك النظام المتجانس خدمة تلو الأخرى على مدار 12 أسبوعاً لتجنب التحويل الشامل المفاجئ.

النتائج والأثر

انخفض مؤشر LCP من 8.4 ثانية إلى 2.6 ثانية. انخفض معدل الارتداد على الهاتف المحمول من 68% إلى 31%. ارتفع معدل التحويل بنسبة 45% في أول 60 يوماً بعد الإطلاق. أصبح فريق الهندسة الآن يُصدر ميزات أسبوعياً بدلاً من كل أسبوعين.

ما قدّمناه

واجهة متجر Next.js 15

واجهة متجر مُحسَّنة للهاتف المحمول أولاً، مدعومة بـ ISR مع مؤشر LCP أقل من 3 ثوانٍ على شبكة 4G.

طبقة واجهة برمجة تطبيقات التجارة بدون رأس

كتالوج منتجات وسلة تسوق وواجهات دفع مفصولة تحل محل نظام PHP المتجانس.

تكوين التخزين المؤقت على الحافة

قواعد Cloudflare واستراتيجية مفاتيح التخزين المؤقت لصفحات المنتجات وقوائم الفئات.

خط تحسين الصور

تحويل تلقائي إلى WebP وتوليد مجموعات srcset المتجاوبة لأكثر من 200K صورة منتج.

لقطات الشاشة