دعنا نتحدث عن التوجيه في Nextjs. اليوم سنتحدث عن واحدة من أقوى البرامج الوسيطة. توفر البرامج الوسيطة في Nextjs طريقة قوية ومرنة لاعتراض الطلبات الواردة من الخادم وتدفق طلبات التحكم (عمليات إعادة التوجيه وإعادة كتابة عنوان URL) وتعزيز الميزات عالميًا مثل المصادقة والترويسات واستمرارية ملفات تعريف الارتباط.

إنشاء الوسيطة

لنقم بإنشاء تطبيق Middleware Next.js. أولاً، سنقوم بإنشاء ملف جديد للبرامج الوسيطة مثل middleware.js أو middleware.ts، في المجلد src. تحتاج البرامج الوسيطة في Next.js إلى السماح لك بالتحكم الدقيق في المكان الذي ستكون فيه نشطة (على سبيل المثال، تكوين المطابق المخصص، أو استخدام وظائف isXXX)

إعادة التوجيه

باستخدام إعادة التوجيه كمثال، دعونا نتخيل سيناريو حيث يجب أن يؤدي الانتقال إلى /profile إلى إعادة توجيه المستخدم إلى الصفحة الرئيسية. باستخدام نهج تكوين المطابق المخصص، يمكننا تحقيق ذلك عن طريق استيراد الأنواع الضرورية، وتحديد وظيفة البرنامج الوسيط، وتحديد تكوين المطابق:

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

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

في هذا المثال، تتحقق وظيفة البرنامج الوسيط مما إذا كان مسار عنوان URL للطلب هو /profile وتعيد توجيه المستخدم إلى الصفحة الرئيسية.

بالنسبة لنهج العبارة الشرطية، يمكننا تعديل الكود على النحو التالي:

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

في هذه الحالة، تتحقق البرامج الوسيطة من مسار عنوان URL للطلب وتعيد توجيه المستخدم إلى المسار /hello إذا كان المسار هو /profile.

تتجاوز البرامج الوسيطة في Next.js مجرد التعامل مع عمليات إعادة التوجيه. كما يسمح أيضًا بإعادة كتابة عنوان URL، وهو ما قد يكون مفيدًا لدعم عنوان URL القديم أو تحسين محركات البحث. من خلال تغيير إعادة التوجيه إلى إعادة الكتابة في الأمثلة السابقة، سيبقى عنوان URL في المتصفح كما هو (/profile)، ولكن محتوى الاستجابة سيتغير إلى المحتوى من المسار /hello.

استخدام ملفات تعريف الارتباط

أخيرًا، دعنا نستكشف استخدام ملفات تعريف الارتباط والرؤوس في البرامج الوسيطة. يمكننا تعديل برامجنا الوسيطة للتعامل مع تفضيلات المستخدم للموضوعات وإضافة رأس مخصص لجميع الاستجابات:

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

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

في هذا المثال، نتحقق أولاً مما إذا كان لدى المستخدم تفضيلات سمة مخزنة في ملف تعريف الارتباط. إذا لم يكن الأمر كذلك، فسنقوم بتعيين السمة على "مظلم" عن طريق إضافة ملف تعريف الارتباط. بعد ذلك، نضيف رأسًا مخصصًا للاستجابة، والذي يمكن أن يكون مفيدًا لتمرير معلومات إضافية أو لأغراض تصحيح الأخطاء.

كما ترون، تعد البرامج الوسيطة في Next.js أداة قوية تتيح لك التحكم بشكل فعال في دورة الطلب والاستجابة واعتراضها، مما يتيح عمليات إعادة التوجيه وإعادة كتابة عنوان URL ومعالجة الرؤوس وملفات تعريف الارتباط. من خلال إتقان البرامج الوسيطة، يمكنك تحسين تجربة التوجيه في تطبيقات Next.js الخاصة بك وإنشاء تجارب مستخدم أكثر قوة وقابلة للتخصيص.

"تعد البرامج الوسيطة في Next.js ميزة قوية توفر طريقة قوية لاعتراض تدفق الطلبات والاستجابات والتحكم فيه داخل تطبيقاتك." - وثائق Next.js

خاتمة

باختصار، تعلمنا كيفية تعريف البرامج الوسيطة في Next.js، واستكشاف الطريقتين الرئيسيتين (تكوين المطابق المخصص والعبارات الشرطية)، وتطبيق البرامج الوسيطة للتعامل مع عمليات إعادة التوجيه، وإعادة كتابة عنوان URL، وإدارة ملفات تعريف الارتباط والعناوين . ستساعدك هذه المعرفة على الارتقاء بتطبيقات Next.js إلى المستوى التالي من خلال الاستفادة من المرونة والتحكم الذي توفره البرامج الوسيطة.