أطلقت Vercel إصدار Next.js 16.3، حيث نقلت Turbopack و Partial Prerendering من المسار التجريبي إلى وضع الجاهزية للإنتاج. يعد هذا التحديث بعمليات بناء (builds) أسرع بمقدار مرتين إلى خمس مرات للتطبيقات متوسطة الحجم، وسرعات تحميل صفحات تقلل من "وقت التفاعل" (Time to Interactive) بنسبة 40-60%—وهي دفعة ستلاحظها أي فرقة تسابق الزمن لإطلاق الميزات.

لماذا يكتسب هذا التغيير أهمية الآن

لطالما اعتمد Next.js على Webpack، وهو أداة تجميع (bundler) لـ JavaScript مكتوبة بلغة JavaScript، لكل من عمليات البناء في بيئة التطوير والإنتاج. خلال العام الماضي، قام فريق Vercel بصقل Turbopack، وهو بديل مبني على لغة Rust يقلل من استهلاك الذاكرة ويسرع عمليات البناء. وفي الوقت نفسه، اختبروا Partial Prerendering (PPR) كوسيلة لدمج HTML الثابت مع المحتوى الديناميكي الفوري، ولكن كان على المطورين التعامل معه كـ "تجربة اختيارية". ومن خلال ترقية كليهما إلى الحالة المستقرة، تمنح Vercel فرق الإنتاج ترقية جاهزة للأداء دون الحاجة إلى أسلوب التجربة والخطأ المعتاد.

Turbopack يصبح مستقراً

  • السرعة: عمليات البناء للإنتاج في المستودعات (repositories) متوسطة الحجم أصبحت الآن أسرع بمقدار مرتين إلى خمس مرات.
  • الذاكرة: يقلل من الضغط على الذاكرة في قواعد الأكواد الكبيرة.
  • التفعيل: أضف turbo: true إلى next.config.js وستكون جاهزاً.

المقايضة هي بيئة أكثر صرامة. يتطلب Turbopack إصدار Node 18.17 أو أحدث، وأي إضافات Webpack مخصصة تعتمد عليها المشاريع لن تعمل تحت Turbopack. يجب على الفرق التي تمتلك خطوط أنابيب (pipelines) واسعة من الإضافات مراجعة أو إعادة كتابة تلك الامتدادات قبل تفعيل الميزة.

تجربة أكثر سلاسة لـ Server Actions

تتمتع Server Actions—وهي وظائف تعمل على الخادم ولكن يتم استدعاؤها من جانب العميل—الآن بتكامل أوثق مع TypeScript. يستنتج المترجم (compiler) الأنواع تلقائياً، مما يسمح للمطورين بالاستغناء عن كتابة تعليقات الأنواع (type annotations) يدوياً. كما أنه يفهم الكائنات المتداخلة ومخططات Zod بشكل كامل، مما يقلل من عدم التطابق أثناء التشغيل. وتجعل اتفاقيات نظام الملفات الجديدة عملية تحديد الإجراءات (action resolution) صريحة، مما يساعد المطورين على تجنب الأخطاء الدقيقة الناتجة عن الاستيرادات الغامضة.

Partial Prerendering (PPR) جاهز للإنتاج

يتيح PPR لصفحة واحدة تقديم HTML ثابت للأجزاء التي لا تتغير أبداً، مع تحديث (hydrating) الأجزاء الديناميكية بشكل منفصل. يظهر التصميم الثابت (static markup) فوراً؛ ثم يقوم جلب البيانات في الخلفية بإحياء الأجزاء التفاعلية. يحسن هذا النهج من "وقت التفاعل" (TTI) بنسبة 40–60%.

تنفيذ PPR مباشر وبسيط: قم بتمييز الأجزاء الثابتة باستخدام واجهة برمجة تطبيقات التوليد الثابت (static generation API) الحالية، واترك الأجزاء الديناميكية تعود إلى العرض من جانب العميل (client-side rendering). ولأن HTML الثابت يصل كوثيقة كاملة، يمكن للمتصفح البدء في العرض قبل تشغيل أي JavaScript، مما يعزز الأداء الملحوظ على الشبكات البطيئة.

تحسينات أخرى ملحوظة

  • تحسين الصور: يمكن الآن ضبط fetchPriority على صور LCP (Largest Contentful Paint)، مما يضمن قيام المتصفح بجلب الصورة الرئيسية (hero image) أولاً.
  • التعامل مع الخطوط: تقوم next/font بتقسيم الأحرف تلقائياً (subsets)، مما يقلل من حجم الحمولة دون إعدادات إضافية.
  • Middleware: تمت إعادة كتابة محرك المطابقة بلغة Rust، مما يوفر عمليات فحص مسارات أسرع. يمكن لـ Middleware أيضاً إرجاع استجابات HTML كاملة، مما يفتح الأبواب للصفحات التي يتم عرضها عند الحافة (edge-rendered pages).

خطوات فورية للفرق

  1. قم بتفعيل Turbopack في بيئة التطوير؛ فهو يعمل بنفس الطريقة في الإنتاج بمجرد ضبط علامة turbo.
  2. قم بترقية Node إلى الإصدار 20 أو أعلى.
  3. راجع Server Actions للاستفادة من ميزة استنتاج الأنواع؛ قم بإزالة أي تعليقات يدوية أصبحت الآن غير ضرورية.
  4. اختبر Partial Prerendering على مسار واحد عالي الزيارات لقياس تحسينات TTI قبل تعميمه على الموقع بالكامل.

تنبيهات ونقاط مضادة

تعتمد مكاسب الأداء على تلبية متطلبات وقت التشغيل الجديدة. المشاريع العالقة في إصدارات Node القديمة أو التي تعتمد بكثافة على إضافات Webpack المخصصة ستواجه صعوبات.

الخلاصة: يضع Next.js 16.3 بين أيدي المطورين أداة تجميع (bundler) بمستوى الإنتاج ومدعومة بلغة Rust، وطريقة مثبتة لدمج المحتوى الثابت والديناميكي. اعتمد الإعدادات الافتراضية الجديدة الآن، وعالج فجوات التوافق، وستلاحظ انتهاء عمليات البناء بشكل أسرع وتصبح الصفحات أكثر استجابة بشكل ملحوظ للمستخدمين النهائيين.