الوسيط (Middleware)

ما هو الوسيط؟

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

// 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();
}

💡 تحديث Next.js 16: ملف middleware.ts أصبح قديمًا (deprecated) واسمه الجديد proxy.ts — نفس الفكرة والـ API تمامًا (نفس NextRequest/NextResponse ونفس matcher)، بس الدالة المُصدَّرة صارت اسمها proxy بدل middleware:

نسخ

// proxy.ts (بدل middleware.ts)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function proxy(request: NextRequest) {
  // نفس منطق middleware بالضبط
  return NextResponse.next();
}

مشاريع Next.js 16 الجديدة يُفضَّل تبدأ مباشرة بـ proxy.ts. middleware.ts القديم لسا يشتغل (للتوافق الخلفي)، وفي أداة تحويل جاهزة: npx @next/codemod@canary middleware-to-proxy .

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

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

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

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

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

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