حماية المسارات المستندة إلى Middleware
استخدم Middleware في Next.js واستدعاءات المصادقة لإعادة توجيه المستخدمين غير المصادق عليهم عند الحافة.
حماية المسارات المستندة إلى Middleware درس مجاني في React Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.
ما هي Middleware في Next.js؟
تُنفَّذ Middleware عند الحافة قبل وصول الطلب إلى أحد المسارات. ويمكنها إعادة التوجيه أو إعادة الكتابة أو إضافة الترويسات — ما يجعلها مثالية لفحوصات المصادقة دون تحميل مكوّنات الخادم.
إنشاء Middleware
أنشئ الملف middleware.ts في جذر المشروع. صدّر دالة middleware ومطابق config.
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('auth-token')?.value;
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
};أنماط المطابقة
تستخدم مصفوفة matcher أنماط المسارات. استخدم :path* لأي مسار فرعي، أو استبعد المسارات باستخدام نظرة أمامية سالبة.
export const config = {
matcher: [
// Protect all routes except public ones:
'/((?!login|register|_next|api/auth|favicon.ico).*)',
],
};تكامل Auth.js مع Middleware
يوفّر Auth.js (v5) تصديرًا جاهزًا لـ Middleware. أعد تصديره من middleware.ts مع مطابِق.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/settings/:path*'],
};التحقق من JWT في Middleware
تحقّق من رمز JWT في Middleware باستخدام مكتبة jose المتوافقة مع Edge، إذ لا تحتاج إلى وحدة التشفير crypto في Node.js.
import { jwtVerify } from 'jose';
export async function middleware(request: NextRequest) {
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));
try {
await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
return NextResponse.next();
} catch {
return NextResponse.redirect(new URL('/login', request.url));
}
}Middleware المعتمدة على الأدوار
اقرأ دور المستخدم من الرمز وأعد توجيهه إلى صفحة غير مصرّح بها إذا لم يكن دوره كافيًا.
const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
return NextResponse.redirect(new URL('/unauthorized', request.url));
}تمرير البيانات إلى معالجات المسارات
عيّن ترويسة للطلب داخل Middleware لتمرير بيانات المستخدم المفككة إلى مكوّنات الخادم دون إعادة جلب الرمز.
const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;
// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');إعادة كتابة عناوين URL في Middleware
استخدم NextResponse.rewrite() لعرض صفحة مختلفة لعنوان URL دون تغيير شريط العناوين في المتصفح — وهذا مفيد لاختبارات A/B أو أعلام الميزات.
const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
return NextResponse.rewrite(new URL('/home-v2', request.url));
}البيانات الجغرافية وعنوان IP في Middleware
يمكنك الوصول إلى البيانات الجغرافية للطلب وعنوان IP من كائن NextRequest لإجراء عمليات إعادة توجيه أو حظر تستند إلى المنطقة.
const country = request.geo?.country ?? 'US';
if (country === 'XX') {
return NextResponse.redirect(new URL('/region-blocked', request.url));
}أداء Middleware
تُنفَّذ Middleware عند الحافة مع كل طلب مطابق. اجعلها خفيفة — وتجنّب العمليات الحسابية المكثفة أو عمليات الاستيراد الكبيرة. استخدم مكتبات متوافقة مع Edge فقط.
دمج المسارات المحمية والعامة
من الأنماط الشائعة حماية كل شيء باستثناء قائمة سماح محددة من المسارات العامة، والتحقق منها قبل تنفيذ منطق المصادقة.
const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();
// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));تحقّق سريع
ما المكتبة التي ينبغي استخدامها للتحقق من JWT داخل Middleware في Next.js بدلًا من وحدة crypto في Node؟
مراجعة
أنشئ middleware.ts في جذر المشروع مع إعداد matcher. تحقّق من رموز المصادقة باستخدام jose المتوافق مع Edge، وأعد توجيه المستخدمين غير المصادق عليهم، ومرّر البيانات المفككة إلى مكوّنات الخادم عبر ترويسات الاستجابة. حافظ على سرعة Middleware وخفة تبعياتها.
الأسئلة الشائعة
هل درس «حماية المسارات المستندة إلى Middleware» مجاني؟
نعم — نص درس «حماية المسارات المستندة إلى Middleware» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.
ماذا ستتعلم في «حماية المسارات المستندة إلى Middleware»؟
استخدم Middleware في Next.js واستدعاءات المصادقة لإعادة توجيه المستخدمين غير المصادق عليهم عند الحافة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «حماية المسارات المستندة إلى Middleware»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد Auth.js في Next.js App Router
- إدارة الجلسات وuseSession Hook
- موفّر بيانات الاعتماد وتسجيل الدخول المخصص
- حماية المسارات المستندة إلى Middleware