تطوير Next.js للشركات التي تُقاس بسرعة تحميلها

ما هي Next.js؟

Next.js إطار عمل مبني فوق React من شركة Vercel. React وحده يعمل كليًا في المتصفح: يرسل الخادم ملف HTML شبه فارغ، ثم ينزّل المتصفح حزمة JavaScript، وعندها فقط يظهر شيء. هذا مقبول للوحة تحكم داخلية خلف تسجيل دخول. لكنه مشكلة لصفحة عامة، لأن زاحف البحث والعميل على هاتف متوسط كليهما ينتظران طوال ذلك.

Next.js يقلب هذا. تُعرض الصفحات كـ HTML حقيقي على الخادم، فيصل النص والعناوين والصور ضمن الاستجابة نفسها. ولا تزال JavaScript تُحمَّل وتتولى الأجزاء التفاعلية، لكن لا أحد ينتظرها ليقرأ الصفحة. وبالنسبة لموقع تسويقي، هذا الفارق هو الحجة كاملة.

كما يوفّر التوجيه وتحسين الصور ومسارات الـ API في حزمة واحدة، وهو أمر أقل أهمية لأداء الموقع وأكثر أهمية بكثير لمدة بنائه.

متى نختار Next.js

نلجأ إلى Next.js حين يجب أن تُكتشف الصفحة وأن تكون سريعة — وهذا يشمل معظم المواقع التسويقية، وكل متجر إلكتروني، وأي تطبيق يكون مسار التسجيل فيه علنيًا.

ثلاث حالات تجعله الخيار البديهي. الأولى، حين يحمل تحسين محركات البحث إيرادًا حقيقيًا: فـ HTML المعروض من الخادم يعني أن الزاحف يرى الصفحة النهائية لا هيكلًا فارغًا. الثانية، حين يكون الجمهور على شبكات الجوال — فجزء كبير من الخليج يتصفح على 4G، والفارق بين العرض من الخادم والعرض من المتصفح يكون أكبر ما يكون هناك بالضبط. الثالثة، حين يحتاج الموقع صفحات تسويقية وشاشات تطبيق في قاعدة كود واحدة، وهو الشكل المعتاد حالما تريد الشركة بوابة عملاء خلف الواجهة التعريفية.

وهو أيضًا خيارنا الافتراضي حين يحتاج العميل العربية والإنجليزية في الموقع نفسه. فـ Next.js يدعم التوجيه حسب اللغة أصلًا، فيصبح /ar رابطًا حقيقيًا بـ HTML خاص به لا مجرد مبدّل لغة لا يستطيع الزاحف تتبعه.

متى لا نستخدم Next.js

لا نستخدم Next.js لكل شيء، وسنقول ذلك قبل أن تدفع مقابله.

إن كان الموقع بضع صفحات تتغير مرتين في السنة، فإعداد ثابت أبسط يكلّف أقل في البناء ولا شيء في التشغيل. وإن كان المنتج أداة داخلية بحتة خلف تسجيل دخول — لوحة عمليات لن يراها أحد خارج الشركة — فالعرض من الخادم لا يقدّم لك شيئًا، وReact أو Vue وحدهما أخف في الصيانة. وإن كان فريقك يشغّل تطبيق Laravel أو ‎.NET‎ ويريد شاشة إضافية داخله، فإضافة واجهة Next.js منفصلة تعني نشرتين ومجموعتي اعتماديات يجب ترقيعهما، وهذا نادرًا ما يستحق لشاشة واحدة.

والقيد الصادق الآخر هو الاستضافة. Next.js يحتاج عملية Node. وعلى استضافة cPanel المشتركة — ولا تزال شائعة في الخليج للميزانيات الأصغر — يصبح ذلك متعبًا، وسنوصي عادةً بـ Laravel مع Blade معروض من الخادم بدلًا منه، فهو يعمل حيثما تعمل PHP.

ما الذي نبنيه بـ Next.js

مواقع تسويقية بنظام إدارة محتوى يديره فريقك

أشيع مشروع Next.js نطلقه: موقع عام سريع خلفه محرّر مخصص، فينشر فريق التسويق دون فتح تذكرة. تُعرض الصفحات من الخادم، وتُحوَّل الصور إلى WebP وAVIF عند الرفع، وتُفشل ميزانية أداء في CI أي بناء يدفع LCP فوق ثانيتين. من أربعة إلى ثمانية أسابيع، والمستودع لك من أول commit.

مواقع خليجية ثنائية اللغة تكون فيها العربية تخطيطًا أصيلًا

دعم العربية مسألة تخطيط لا مهمة ترجمة. نبني النسخة من اليمين إلى اليسار بخصائص CSS المنطقية من أول commit، ونعكس الأيقونات التي ترمز إلى اتجاه ونترك التي تصوّر أشياء حقيقية، ونختار خطًا عربيًا عن قصد بدل ترك نظام التشغيل يختار، ونضبط hreflang ليترتب كل لسان على عباراته بدل أن ينافس الآخر.

متاجر على واجهة خلفية تجارية منفصلة

يحتفظ Shopify أو WooCommerce بالكتالوج والمدفوعات والمخزون؛ ويعرض Next.js واجهة المتجر. فتحصل على دفع مرّ أصلًا بامتثال PCI، وواجهة أمامية لا تصارع نظام قوالب على التحكم في وزن الصفحة. وهذا الإعداد نوصي به حين تتجاوز علامة تجارية قالبًا جاهزًا دون أن ترغب في امتلاك منظومة دفع.

بوابات عملاء متصلة بنظام قائم

حين تشغّل الشركة نظام ERP أو نظام حجوزات بالفعل، نضع أمامه بوابة Next.js: يتحقق العملاء من طلب، أو ينزّلون فاتورة، أو يحجزون موعدًا دون الاتصال بأحد. تتحدث البوابة إلى نظامك القائم عبر واجهة برمجية بدل استبداله، فيبقى المشروع في نطاق أسابيع لا سنة يستغرقها الترحيل.

كيف نطلق مشاريع Next.js

كل مشروع Next.js ندير نشره من مستودعك أنت، تحت حساب مؤسستك، من اليوم الأول. والبيئة التجريبية موجودة من أول دورة، وهناك مكالمة عرض كل جمعة على ما هو منشور فعلًا لا على فرع محلي.

تُحدَّد ميزانية الأداء عند الانطلاق وتُفرض في CI: LCP أقل من ثانيتين على ملف جوال متوسط مُقيَّد، وCLS أقل من 0.05، وسقف متفق عليه لحجم JavaScript. وأي طلب دمج يتراجع في أي من الثلاثة لا يُدمج. وهذه هي الآلية التي تُبقي الموقع سريعًا في الشهر الثامن عشر، لا في أسبوع إطلاقه فقط.

الاستضافة عادةً Vercel أو حاوية على AWS، حسب ما إذا كان يُسمح لبياناتك بمغادرة المنطقة — وهو سؤال نطرحه في مرحلة الاستكشاف لا بعد البناء.

ما تكلّفك Next.js

يحتاج Next.js بيئة تشغيل Node، ما يستبعد أرخص الاستضافات المشتركة ويضع حدًا أدنى لكلفة بنيتك التحتية الشهرية. وهذا الحد صغير لموقع أعمال؛ لكنه حقيقي لموقع تعريفي بخمسين زائرًا شهريًا.

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

وأخيرًا، هو قاعدة كود React. فإن كان فريقك الداخلي على PHP، فتسليمه واجهة Next.js يعني إما التوظيف لأجلها أو القبول بأن التعديلات تعود إلينا. وسنطرح ذلك في مرحلة الاستكشاف، لأن منظومة لا يستطيع فريقك صيانتها كلفة لا ميزة.

أسئلة تُطرح علينا عن Next.js