أهم التغييرات في Next.js 16: Turbopack، Proxy بدل Middleware، وCache Components

Next.js 16 مو مجرد رفع رقم إصدار — فيه كام تغيير جوهري بيأثر على أي مشروع جديد أو قديم بتشتغل عليه. هاي أهم ثلاثة تغييرات لازم تعرفها.

1. Turbopack صار الحزمة الافتراضية

من Next.js 16، أوامر next dev وnext build تستخدم Turbopack (الحزّام المبني بلغة Rust) تلقائيًا، بدون أي إعداد إضافي — بدل Webpack اللي كان الافتراضي بالإصدارات الأقدم.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  }
}

الفايدة الأساسية: أوقات تشغيل وبناء أسرع بشكل ملحوظ، خصوصًا بالمشاريع الكبيرة، بفضل التخزين المؤقّت على مستوى الدالة والبناء المتوازي عبر الأنوية.

لو احتجت الرجوع لـ Webpack (مثلًا بسبب إضافة webpack plugin ما زالت غير مدعومة بـ Turbopack)، أضف --webpack:

{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack"
  }
}

💡 Turbopack ما يدعم webpack plugins حاليًا — بس يدعم webpack loaders. لو مشروعك يعتمد على plugin معيّن بشكل أساسي، جرّب المشروع أولًا بـ Turbopack قبل ما تقرّر.

2. من Middleware إلى Proxy

ملف middleware.ts — اللي بيشتغل قبل اكتمال أي طلب لإعادة التوجيه أو الحماية أو التخصيص — أصبح قديمًا (deprecated) بـ Next.js 16، واسمه الجديد proxy.ts.

السبب حسب فريق Next.js: كلمة "middleware" كانت تلخبط المطورين مع middleware إكسبرس (Express.js)، وتشجّع استخدامها بشكل مبالغ فيه رغم إنها موصى فيها كحل أخير فقط. الاسم الجديد "Proxy" يوضّح إنها طبقة شبكية أمام التطبيق.

الـ API نفسه بالضبط — بس اسم الدالة المُصدَّرة يتغيّر:

// قبل: middleware.ts
export function middleware(request: NextRequest) {
  return NextResponse.next();
}

// بعد: proxy.ts
export function proxy(request: NextRequest) {
  return NextResponse.next();
}

middleware.ts القديم لسا يشتغل للتوافق الخلفي، وفي أداة تحويل جاهزة تسوّي التحويل تلقائيًا:

npx @next/codemod@canary middleware-to-proxy .

3. Cache Components: نموذج تخزين مؤقّت جديد

بدل الاعتماد بس على export const revalidate أو fetch(url, { next: { revalidate } })، صار عندك توجيه صريح بالكود نفسه:

// next.config.ts
const nextConfig = { cacheComponents: true };

async function getProducts() {
  "use cache";
  const res = await fetch("https://api.example.com/products");
  return res.json();
}

مع دوال مرافقة زي cacheLife("hours") لتحديد المدّة ببروفايلات جاهزة، وcacheTag/updateTag للإبطال الدقيق عند الطلب. هاد النموذج اختياري بالكامل — النموذج القديم لسا يشتغل بدون أي تغيير لو ما فعّلت cacheComponents.

اقرأ الشرح الكامل بدرس Cache Components بمسار Next.js بالموقع.

جدول ملخّص

هل يلزمك تحديث كودك الآن؟

مو بالضرورة. أغلب هاي التغييرات تراكمية لا تكسر مشروعك فورًا — middleware.ts لسا يشتغل، والنموذج القديم للتخزين المؤقّت لسا يشتغل، وTurbopack غالبًا "بينفع لوحده" بدون تعديل كود. أهم شي تعرف الأسماء الجديدة عشان لما تشوفها بتوثيق أو مشروع حديث ما تستغرب منها، وتبدأ فيها مباشرة بأي مشروع Next.js 16 جديد.

الخلاصة

Turbopack افتراضي، Proxy بدل Middleware، وCache Components — ثلاثة تغييرات بتوضّح وين متجهة Next.js: أداء أسرع، تسمية أوضح، وتحكّم أصرح بالتخزين المؤقّت. القديم ما بيختفي فجأة، بس المشاريع الجديدة الأفضل تبدأ بالمعايير الجديدة من أول يوم.

تابع مسار Next.js الكامل بالعربي — يشمل كل هاي المفاهيم بالتفصيل.