Next.js • المستوى الثالث • الدرس 3

البرمجيات الوسيطة والحماية (Middleware)

أهداف الدرس العلمية

إنشاء ملف middleware.js لمعالجة الطلبات قبل وصولها للصفحة.
حماية اللوحات والتأكد من تسجيل الدخول قبل العرض بـ NextResponse.redirect().
استخدام matcher لتحديد المسارات المحمية بدقة.
فهم دور Edge Runtime في سرعة الاستجابة والأمان.

1. قوة الـ Middleware

تنفذ Middleware على حافة الشبكة (Edge) لمنح حماية واستجابة فائقة للتحقق من هوية الزوار قبل استهلاك أي موارد من الخادم.

javascript

export function middleware(request) {
  const token = request.cookies.get('auth');
  
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: '/dashboard/:path*',
};

2. متى يُنفّذ الـ Middleware؟

✅ ينفذ قبل

• تحميل الصفحة
• جلب البيانات
• تنفيذ Route Handler

🎯 استخداماته

• حماية المسارات
• إعادة التوجيه (Redirects)
• تعديل الـ Headers

التطبيق العملي المباشر

تحدي الدرس الثالث: توسيع نطاق الحماية

قم بالتعديل على الكود في المحرر أدناه:

أضف مسار /admin إلى قائمة المسارات المحمية.
عدّل matcher ليصبح مصفوفة تحتوي على '/dashboard/:path*' و '/admin/:path*'.
أضف زر /admin في المحاكي للتبديل بين المسارات.
عدّل مصفوفة protectedPaths لتشمل '/admin'.

⏳ جارٍ تحميل المحرر التفاعلي...

الدرس السابق الانتقال للدرس الرابع