React و Next.js
واجهات سريعة ومتوافقة مع محركات البحث، وتطبيقات ويب متكاملة.
React وNext.js يشغّلان أسرع المواقع على الإنترنت، عندما يُستخدمان بالشكل الصحيح. أطلقنا بهما كل شيء، من المواقع التسويقية إلى منصات SaaS المعقدة، ونعرف تمامًا من أين يأتي أداؤهما. وتتناول هذه الصفحة الهندسة التي تحت السطح: ما الذي يُعرض على الخادم وما الذي يعمل في المتصفح، وكم من JavaScript يصل إلى هاتف متوسط الإمكانات، وكيف ينعكس المكوّن تلقائيًا للعربية، وكيف يتحول نظام التصميم إلى كود يواصل مطوّروك البناء عليه.
كيف ننفّذ React و Next.js.
العرض من جهة الخادم
صفحات تصل جاهزة: ظهور فوري وفهرسة كاملة في محركات البحث.
بنية App Router
أنماط Next.js الحديثة: مكوّنات الخادم، والبث التدريجي (streaming)، وكود جاهز للعمل على شبكة الحافة (edge).
واجهات مبنية على نظام تصميم
مكتبات مكوّنات بـ Tailwind وshadcn/ui لبناء سريع ومتسق.
هندسة الأداء
انضباط في حجم الحزم، وتحسين للصور، وتخزين مؤقت للوصول إلى مؤشرات Web Vitals خضراء.
من اليمين إلى اليسار داخل كل مكوّن
العربية والإنجليزية من مكتبة مكوّنات واحدة، ينعكس فيها التخطيط من تلقاء نفسه بدلًا من ملف أنماط ثانٍ يُرقَّع لاحقًا.
واجهات خفيفة وأمينة
الأسعار والضرائب وقواعد العمل تأتي من واجهة API. المتصفح يعرضها فقط، ولا يحسبها بنفسه أبدًا.
ما يتضمنه العمل فعلًا.
طريقة العرض تُقرَّر صفحةً بصفحة
يتيح Next.js لكل مسار أن يختار. الصفحات التي نادرًا ما تتغير تُبنى مسبقًا، والصفحات التي يجب أن تكون محدّثة وقابلة للفهرسة تُعرض على الخادم، ولا يعمل كمكوّنات في المتصفح إلا الأجزاء التفاعلية فعلًا. والخطأ الشائع هو تحويل كل شيء إلى كود يعمل في المتصفح، فيُشحن التطبيق كله إلى الهاتف على هيئة JavaScript. أما مكوّنات الخادم فتُبقي جلب البيانات والمكتبات الثقيلة على الخادم، ويرسل البث التدريجي هيكل الصفحة قبل وصول البيانات البطيئة.
ضع ميزانية لـ JavaScript، لا للصور وحدها
كل كيلوبايت من الكود يجب تنزيله وتحليله وتفعيله (hydration) قبل أن تستجيب الصفحة، وكثيرًا ما تفوق أكواد الطرف الثالث حجم المنتج نفسه. نحدّد الميزانية بالأرقام في أول دورة عمل (sprint) ونُلزم الكود بها كلما كبر. فالدرجة لا يصنعها إطار العمل، بل تصنعها الميزانية. وموقع El Sewedy Digital يحمل نماذج ثلاثية الأبعاد ورسومًا متحركة، ومع ذلك يحقق 100% في فئات Lighthouse الأربع كلها.
الاتجاه من اليمين إلى اليسار مكانه داخل المكوّن
يطول النص العربي بنحو الربع مقارنةً بالإنجليزي، ويعكس التخطيط بالكامل. وفي الكود يعني ذلك استخدام الخصائص المنطقية (البداية والنهاية بدلًا من اليمين واليسار)، وضبط الاتجاه لكل لغة على مستوى المستند، وقرارًا لكل أيقونة: الأسهم وأشرطة التقدم تنعكس، والشعارات وأزرار تشغيل الوسائط لا تنعكس. المكوّنات المكتوبة بهذه الطريقة من البداية لا تكلّف إلا القليل، أما ترقيع كود إنجليزي مكتمل فيقترب من إعادة كتابة واجهته الأمامية.
رابط مستقل لكل لغة، يُعرض على الخادم
ينبغي أن يمنح موقع Next.js ثنائي اللغة كل لغة مسارًا خاصًا بها، وبيانات وصفية خاصة بها، وإدخالات خاصة بها في خريطة الموقع، مع روابط اللغة البديلة التي تربط كل صفحة بنظيرتها. وعرض النسخة العربية على الخادم أمر مهم: يجب أن يستلم محرك البحث صفحة HTML عربية، لا صفحة إنجليزية تتحول إلى العربية بعد تحميل الأكواد. استخدم لغة الزائر لاقتراح التبديل، لا لإعادة توجيهه.
نظام التصميم يعيش داخل المستودع
يسلّم مصممونا رموز تصميم (tokens) مسمّاة، تتحول في كود React إلى إعدادات Tailwind، فيكون للون العلامة التجارية أو لدرجة المسافات تعريف واحد يقرؤه التطبيق كله. وتوفر shadcn/ui مكوّنات أساسية تراعي إمكانية الوصول على هيئة ملفات مصدرية داخل مستودعك، نعدّلها لتطابق هويتك بدلًا من تجاوزها من الخارج. ولكل مكوّن خيارات محددة الأنواع بدلًا من أسماء أنماط عشوائية، ومعه حالات التحميل والفراغ والخطأ، فتُجمَّع الشاشات الجديدة من أجزاء معتمدة.
المتصفح لا ينبغي أن يعرف قواعد التسعير
متجر SG-Mart على الويب وتطبيقاه على iOS وAndroid كلها عملاء لواجهة API تجارية واحدة. التسعير والضرائب والعروض تعيش في هذه النواة، فتعرض الواجهات الثلاث الإجابة نفسها، ويُطلق أي تغيير في الأسعار مرة واحدة. الواجهة الأمامية تسأل وتعرض. وهي مسؤولة أيضًا عن اللحظة التي لا يستطيع فيها النظام الخلفي الرد: فما يراه المتسوّق حين يتعذر الوصول إلى نظام ERP لبرهة يجب أن يكون رسالة صريحة، لا مؤشر تحميل لا ينتهي.
نتائج، لا مجرد مخرجات.
- صفحات تفضّلها Google وتُحمَّل في أقل من ثانية
- تقنية واحدة للموقع التسويقي وللمنتج
- قاعدة كود يستطيع أي مطوّر React استلامها
- العربية والإنجليزية من مكتبة مكوّنات واحدة، وكلتاهما صحيحة
- المستودع في حساب مؤسستك من أول سطر كود
أين نفّذنا ذلك من قبل.
ما ستريد أن تسأل عنه.
Next.js أم React وحده؟
اختر Next.js حين تحتاج الصفحات إلى الظهور في Google أو إلى السرعة من الزيارة الأولى، فالعرض من جهة الخادم والتوجيه وتحسين الصور مدمجة فيه. أما تطبيق React أحادي الصفحة فمناسب لأداة تعمل خلف تسجيل الدخول، حيث لا يهم البحث ويعود المستخدمون يوميًا. وكثير من المنتجات تحتاج إلى الاثنين، ويستطيع Next.js تقديمهما من قاعدة كود واحدة.
لدينا كود React قائم. هل يمكنكم العمل داخله؟
نعم. يمكن لمهندسينا الانضمام إلى اجتماعاتكم اليومية والعمل مباشرة في مستودعكم، بينما يحدد قائدكم التقني الاتجاه، مقابل سعر شهري، وسعر الساعة لدينا بين 25 و49 دولارًا ويُكتب في عرض السعر مسبقًا. أو نتولى جزءًا محددًا بنطاق ثابت. وفي الحالتين، يجب أن تنتهي أول دورة عمل بكود مدمج فعلًا، لا بقائمة قراءة.
تطبيق React لدينا بطيء. هل نحتاج إلى إعادة بنائه؟
غالبًا لا. قِس أولًا، ثم أصلح أثقل المشكلات القليلة. المتهمون المعتادون: صور كبيرة الحجم، وأكواد تعطّل العرض، وغياب التخزين المؤقت، واستضافة بطيئة. وفي تطبيقات React أضف إليها: عرض كل شيء في المتصفح، وبضع مكتبات ضخمة جدًا، وأكواد الطرف الثالث. ومعظم التطبيقات تصبح أسرع بكثير دون إعادة بناء.
هل يمكنكم إضافة العربية إلى تطبيق Next.js إنجليزي لدينا؟
نعم، لكن احصل أولًا على تقدير صريح. فالتكلفة تعتمد على مقدار الكود الذي يفترض الاتجاه من اليسار إلى اليمين: هوامش مثبتة، ومواضع مطلقة، وأيقونات تشير إلى جهة واحدة. نراجع ذلك أولًا، ثم نضيف التوجيه حسب اللغة، والخصائص المنطقية، والأيقونات المنعكسة، وخطًا عربيًا، وبيانات وصفية مترجمة. وإن كان الاتجاه مثبتًا في كل مكان، فالمهمة تعادل إعادة بناء معظم الواجهة الأمامية، ومن حقك أن تعرف ذلك قبل أن تبدأ.
هل سنكون مقيّدين بمنصة استضافة واحدة؟
لا. يعمل Next.js على أي خادم Node.js أو حاوية، كما يعمل على المنصات المُدارة، فتُختار الاستضافة بحسب طبيعة العمل والميزانية. وأيًّا كان الاختيار، تكون حسابات الاستضافة والسحابة باسمك، ويكون وصولنا صلاحية تستطيع سحبها.
من يملك المكوّنات ونظام التصميم؟
أنت، من أول سطر كود. يكون المستودع في حساب مؤسستك، وتعيش مكوّنات shadcn/ui داخله كملفات مصدرية تستطيع تعديلها، لا كمكتبة مغلقة لا تستطيع فتحها. ونستخدم أدوات شائعة، ونوثّق القرارات إلى جانب الكود، حتى يستطيع مطوّر React توظّفه العام المقبل مواصلة العمل دون الاتصال بنا.
لنتحدث عن React و Next.js.
أخبرنا عن منتجك وجدولك الزمني وأهدافك، وسنرد عليك خلال يوم عمل واحد.