Middleware در Nextjs

در Middleware, Next.js یک تابع است که قبل از اینکه درخواست به منطق سمت سرور شما (مثل مسیرهای API یا کامپوننت‌های صفحه) برسد اجرا می‌شود. این امکان را به شما می‌دهد که کد را اجرا کنید، درخواست‌های ورودی را بررسی کنید، و پاسخ را قبل از رسیدن به مقصد نهایی تغییر دهید.
Middleware می‌تواند برای وظایفی مانند احراز هویت، لاگ‌برداری، ریدایرکت‌ها، هدرهای سفارشی، محدودیت نرخ درخواست‌ها و موارد دیگر استفاده شود.

ویژگی‌های کلیدی Middleware در Next.js:

• تابع Middleware روی Edge Runtime اجرا می‌شود که سبک و سریع است و قبل از رندر شدن صفحه اجرا می‌شود.
• کنترل دقیقی بر مسیریابی به شما می‌دهد، از جمله بازنویسی URL، ریدایرکت و تغییر درخواست.
• تابع Middleware بر هر درخواست به صفحات یا مسیرهای API که بر آن اعمال شده است، اجرا می‌شود.

مثال - Middleware در Next.js

برای ایجاد middleware، باید فایلی با نام middleware.ts یا middleware.js در ریشه پروژه خود تعریف کنید.

مثال ساده از Middleware:

// middleware.ts

import { NextResponse } from 'next/server';

import type { NextRequest } from 'next/server';

export function middleware(req: NextRequest) {

  // به عنوان مثال، می‌توانید بررسی‌های احراز هویت را در اینجا انجام دهید

  const { pathname } = req.nextUrl;

  // کاربر را در صورتی که در حال تلاش برای دسترسی به مسیر محافظت‌شده باشد ریدایرکت کنید

  if (pathname.startsWith('/admin')) {

    const token = req.cookies.get('token');

    if (!token) {

      // اگر احراز هویت نشده باشد، ریدایرکت به صفحه لاگین

      return NextResponse.redirect(new URL('/login', req.url));

    }

  }

  // اگر همه چیز درست بود، درخواست ادامه پیدا می‌کند

  return NextResponse.next();

}

// مشخص کنید که middleware بر روی چه مسیرهایی اجرا شود

export const config = {

  matcher: ['/admin/:path*'], // اجرای middleware برای مسیرهای admin

};

در این مثال، middleware:

1. بررسی می‌کند که آیا کاربر در حال دسترسی به صفحه /admin است.
2. اگر کوکی‌ای به نام token وجود نداشته باشد (یعنی کاربر احراز هویت نشده)، کاربر را به صفحه لاگین ریدایرکت می‌کند.
3. اگر کاربر احراز هویت شده باشد، درخواست اجازه ادامه پیدا می‌کند.

آنچه می‌توانید با Middleware انجام دهید:

1. احراز هویت و مجوز: می‌توانید مسیرهای محافظت‌شده را با بررسی توکن‌ها یا کوکی‌ها قبل از اجازه دسترسی کاربران، محافظت کنید. به عنوان مثال، کاربرانی که احراز هویت نشده‌اند را به صفحه لاگین ریدایرکت کنید:

if (!req.cookies.get('auth')) {

  return NextResponse.redirect(new URL('/login', req.url));

}

۲. بازنویسی و ریدایرکت URL: می‌توانید URLها را به صورت پویا بازنویسی یا ریدایرکت کنید.

ریدایرکت:
if (pathname === '/old-path') {

  return NextResponse.redirect(new URL('/new-path', req.url));

}

بازنویسی: بازنویسی URL را تغییر می‌دهد بدون اینکه URL نمایش داده شده در مرورگر تغییر کند.

return NextResponse.rewrite(new URL('/another-path', req.url));

۳. اقدامات بر اساس موقعیت جغرافیایی: می‌توانید از req.geo برای بررسی مکان کاربر و تغییر پاسخ استفاده کنید (برای مثال، ریدایرکت کاربران به زیر دامنه‌های کشور خاص).

const country = req.geo?.country || 'US';

return NextResponse.rewrite(new URL(`/${country}${pathname}`, req.url));

۴. هدرهای سفارشی و سیاست‌های امنیتی: می‌توانید هدرها را برای امنیت بیشتر یا نیازهای سفارشی تغییر دهید (مثل CORS یا Content Security Policy).

const response = NextResponse.next();

response.headers.set('X-Custom-Header', 'Custom Value');

return response;

۵. آزمون A/B یا فعال‌سازی ویژگی‌ها: از middleware برای ارائه نسخه‌های مختلف از برنامه به کاربران مختلف بر اساس معیارهایی مانند کوکی‌های کاربر یا مکان جغرافیایی استفاده کنید.

۶. لاگ‌برداری و آنالیز: Middleware می‌تواند برای لاگ کردن درخواست‌های ورودی، رفتار کاربر یا استفاده از API قبل از ارسال پاسخ استفاده شود.

console.log(`Incoming request for ${req.url}`);

return NextResponse.next();

اعمال Middleware به مسیرهای خاص

ویژگی config.matcher به شما اجازه می‌دهد که مشخص کنید Middleware بر روی چه مسیرهایی اعمال شود. این کار باعث بهبود عملکرد می‌شود زیرا Middleware تنها بر روی مسیرهای مرتبط اجرا می‌شود.

export const config = {

  matcher: ['/protected/:path*', '/dashboard/:path*'],

};

نکات مهم:

• Middleware قبل از رندر صفحه اجرا می‌شود و شما نمی‌توانید به توابع دریافت داده‌های سمت سرور (مثل getServerSideProps) دسترسی داشته باشید.
• این طراحی شده تا سریع اجرا شود، بنابراین ا ز انجام عملیات سنگین که می‌تواند درخواست‌ها را کند کند، خودداری کنید.

موارد استفاده برای Middleware در Next.js:

• محافظت از مسیرهای خاص (مثل صفحات admin یا صفحات کاربری).
• ایجاد ریدایرکت‌های مبتنی بر منطقه (مثل ریدایرکت کاربران به محتوای محلی).
• پیاده‌سازی آزمون A/B یا ویژگی‌های جدید بدون نیاز به جاوااسکریپت سمت کاربر.
• اضافه کردن هدرهای سفارشی برای امنیت یا آنالیز.
• بازنویسی URL برای داشتن ساختار مسیریابی بهتر.