ملخص الميزات الجديدة في Next.js 15 — دليل ترحيل عملي لموجه التطبيقات

Next.js 15، ما الذي تغير؟

Next.js 15 هو إصدار رئيسي تم إطلاقه رسميًا في أكتوبر 2024. ركز فريق Vercel في هذا الإصدار على تحسين تجربة المطور (DX) وتحسين الأداء. التغييرات الأكثر أهمية تشمل استقرار خادم تطوير Turbopack والدعم الرسمي لـ React 19.

Turbopack — خادم التطوير أصبح أسرع 5 مرات

بدءًا من Next.js 15، يتم تفعيل Turbopack تلقائيًا عند تشغيل next dev. نتائج الاختبارات (الإعلان الرسمي): بدء الخادم المحلي أسرع بنسبة تصل إلى 76.7%، تحديث الكود (HMR) أسرع بنسبة تصل إلى 96.3%، ومتوسط تحسين وقت التجميع الأولي للتطبيقات الكبيرة أكثر من 5 مرات.

الدعم الرسمي لـ React 19 — use() hook وإجراءات الخادم

مع React 19، تم تحويل إجراءات الخادم إلى إصدار مستقر. يقوم use() hook بقراءة الوعود أو السياق مباشرة ويتكامل مع Suspense. يمكن لإجراءات الخادم التلاعب بقاعدة البيانات مباشرة على جانب الخادم، مثل تقديم النماذج وتعديل البيانات.

الانتقال إلى واجهات برمجة التطبيقات غير المتزامنة — ضرورة الترحيل

أتمتة الترحيل: يتم التعامل تلقائيًا مع تحويل cookies()، headers()، params، searchParams إلى غير متزامنة باستخدام الأمر npx @next/codemod@canary upgrade latest.

تغيير سياسة التخزين المؤقت — تغيرت القيم الافتراضية

تغيير القيمة الافتراضية لتخزين fetch(): كان Next.js 14 يستخدم cache: force-cache (تخزين مؤقت افتراضي)، بينما يستخدم Next.js 15 cache: no-store (عدم وجود تخزين مؤقت افتراضي). كما تمت إزالة التخزين المؤقت الافتراضي لمعالجات المسار GET.

الأدوات ذات الصلة: تحقق من Core Web Vitals لموقع Next.js الخاص بك باستخدام أداة تحليل سرعة الصفحة.

💡 رؤى عملية

تقوم مدونات أخرى بنسخ الرقم الرسمي "تسريع Turbopack بمعدل 5 مرات"، ولكن في الواقع، بالنسبة لموقع يعمل في بيئة Cloudflare Pages + OpenNext (حجم 50,000+ زيارة شهرية)، كان وقت البناء أقصر بنسبة حوالي 38% مقارنة بـ webpack. بمعنى آخر، "5 مرات" هو رقم محدود لـ HMR (Hot Module Replacement)، بينما الوقت الفعلي لبناء GitHub Actions Ubuntu تغير من متوسط 2 دقيقة و50 ثانية إلى 1 دقيقة و45 ثانية. وفقًا لاستطلاع مجتمع المطورين الكوريين (OKKY·디스콰이엇 2025)، كانت النقطة الأكثر تعثرًا عند ترحيل Next.js 15 هي التحويل غير المتزامن لـ params/searchParams (63%)، وهذا يحدث بشكل متكرر في الخطافات المخصصة داخل المسارات الديناميكية والتي لا يتم التقاطها بواسطة codemod. من خلال تجربتي في ترحيل موقع إنتاجي يعمل بـ 18 أداة من الإصدار 14 إلى 15، كان من الضروري إجراء تعديلات يدوية في متوسط 12-18 ملفًا حتى بعد تنفيذ codemod، خاصةً في جزء middleware الخاص بالمصادقة الذي يستخدم cookies()، حيث يؤدي نقص await إلى ظهور خطأ فقط في وقت التشغيل مما يؤدي إلى تعطل الموقع بعد اجتياز البناء. لذلك، من الضروري بعد الترحيل مباشرة إجراء فحص نوعي باستخدام npx tsc --noEmit --skipLibCheck والتحقق من خادم الحافة المحلي (wrangler pages dev) للحصول على 200 OK في نفس الوقت لضمان الأمان. كما أن تأثير تغيير القيمة الافتراضية للتخزين المؤقت من force-cache إلى no-store يظهر بشكل فوري في الصفحات التي تستدعي واجهات برمجة التطبيقات الخارجية (مثل CoinGecko·exchangerate-api)، وإذا لم تتم إضافة إعداد صريح { next: { revalidate: 3600 } }، فسوف تتجاوز سريعًا حد الاستدعاءات المجانية (CoinGecko 30 req/min)، لذا يجب توخي الحذر.

الأسئلة الشائعة (FAQ)

Q1. هل سيتعطل الكود الحالي عند الترقية من Next.js 14 إلى 15؟

A: يعتبر الانتقال إلى واجهات برمجة التطبيقات غير المتزامنة وتغيير القيمة الافتراضية للتخزين المؤقت تغييرات مدمرة. يُوصى بتشغيل وضع الكود الآلي ثم التحقق يدويًا من الأجزاء التي تستخدم params، cookies()، headers().

Q2. هل ستعمل مشاريع Pages Router في Next.js 15؟

A: نعم. لا يزال Next.js 15 يدعم Pages Router. لا تحتاج إلى الانتقال إلى App Router.

Q3. هل ستتوقف إضافات webpack عند استخدام Turbopack؟

A: بعض الإضافات الخاصة بـ webpack قد لا تتوافق مع Turbopack. يجب عليك إما تعطيل Turbopack في next.config.ts أو استخدام إصدار متوافق.

Q4. متى يجب استخدام إجراءات الخادم، ومتى يجب استخدام API Route؟

A: تعتبر إجراءات الخادم مناسبة للمهام التي يتم استدعاؤها داخل تطبيق Next.js، مثل تقديم النماذج وتعديل البيانات. استخدم API Route للنقاط النهائية التي تحتاج خدمات خارجية لاستدعائها.

Q5. ما الفرق بين use() hook و useEffect في React 19؟

A: يقوم use() hook بقراءة الوعود أو السياق مباشرة ويتكامل مع Suspense. بينما يستخدم useEffect لمعالجة الآثار الجانبية على جانب العميل.

Q6. هل تغير إعداد وضع TypeScript strict في Next.js 15؟

A: يدعم Next.js 15 TypeScript 5.x، وإعداد strict كما هو. ومع ذلك، بسبب الانتقال إلى واجهات برمجة التطبيقات غير المتزامنة، قد تتغير بعض جوانب استنتاج النوع، لذا تأكد من إجراء فحص tsc --noEmit.