Magdy Atef Zahran

Middleware في Next.js

لو بتدور على طريقة تتحكم في الطلبات اللي بتوصل للسيرفر قبل ما توصل للـ API أو الصفحات فالـ Middleware في Next.js هو الاختيار المناسب, النهارده هنشرح سوا عن إزاي تستخدم الـ Middleware عشان تضيف طبقة تحكم إضافية على مشروعك.

1. في البدايه يعني إيه Middleware؟

الـ Middleware ببساطة هو كود بيتنفذ قبل ما الريكويست يوصل للـ API أو الصفحات… طيب لي استخدمه اساسا ؟ عشان تتحقق من المستخدمين اول تفلتر أو تعدل البيانات او عيد توجيه الطلبات.

2. طيب إزاي تكتب Middleware؟

بكل بساطه أي ملف اسمه middleware.js في الروت بتاع المشروع هيشتغل كـ Middleware.

مثال عملي:

export function middleware(req) { const { pathname } = req.nextUrl; // مثال على إعادة التوجيه لو المستخدم مش مسجل دخول if (pathname.startsWith('/dashboard') && !req.cookies.token) { return NextResponse.redirect('/login'); } return NextResponse.next(); }

هنا بنعمل إعادة توجيه لأي حد يحاول يدخل على /dashboard من غير ما يكون مسجل دخول.

3. استخدامات الـ Middleware

أ. التحقق من المستخدمين:

عايز تتأكد إن المستخدم اللي داخل الصفحة مسجل دخول؟ ممكن تستخدم الكود ده:

import { NextResponse } from 'next/server'; export function middleware(req) { const token = req.cookies.token; if (!token) { return NextResponse.redirect('/login'); } return NextResponse.next(); }