تخطَّ إلى المحتوى

شرح Next.js

الوسيط (Middleware)

الدرس 20 من 25· ⏱ 1 دقائق قراءة

ما هو الوسيط؟

دالة تعمل قبل اكتمال الطلب — مثالية لإعادة التوجيه، الحماية، والتخصيص.

// middleware.ts (في الجذر)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

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

تحديد المسارات (matcher)

export const config = {
  matcher: ["/dashboard/:path*", "/admin/:path*"],
};

استخدامات شائعة

  • حماية الصفحات (تحقّق من تسجيل الدخول).
  • إعادة التوجيه حسب اللغة أو الدولة.
  • إضافة ترويسات أمان.
  • اختبار A/B والتخصيص.

💡 أبقِ الوسيط خفيفًا وسريعًا — يعمل على كل طلب مطابق.

🎯 التالي: أنماط المصادقة.

هل كان هذا الدرس مفيدًا؟