كيف يمكنني اضافة middleware في next js

في Next.js، يمكنك إضافة middleware لـ API Routes باستخدام مفهوم "Custom Server" واستخدام Express.js كجزء من الـ Serverless Functions.
لإضافة middleware , يمكنك اتباع الخطوات التالية:

•  قم بإنشاء ملف `server.js` في الRoute الخاص بمشروع Next.js وقم بتكوين Express.js وإضافة middleware كما ترغب. على سبيل المثال:

const express = require('express');
const app = express();

// Middleware
app.use((req, res, next) => {
  // أي middleware يمكنك وضعه هنا
  console.log('تم تنفيذ الميدلوير!');
  next();
});

// التعامل مع الطلبات القادمة إلى API Routes
app.all('*', (req, res) => {
  return handle(req, res);
});

// سيتم استدعاء الدالة التالية من ملف `next.config.js` للتعامل مع الطلبات القادمة إلى API Routes
module.exports = (req, res) => {
  return app(req, res);
};

• قم بتحديث ملف `next.config.js` في الجذر الخاص بمشروع Next.js ليشير إلى ملف `server.js`. يمكنك استخدام الكود التالي:

module.exports = {
  // ...
  target: 'serverless',
  serverRuntimeConfig: {
    // تحديد المسار الخاص بـ server.js
    // افتراضيًا هو `./server.js`
    // يمكن تعديله بناءً على المسار الذي تم وضع ملف `server.js` فيه
    server: './server.js',
  },
  // ...
};

•  بعد إجراء هذه التغييرات، يمكنك إعادة تشغيل تطبيق Next.js الخاص بك. ستتمكن الآن من استخدام middleware في API Routes والتحكم في تنفيذها وفقًا لاحتياجاتك.

لإضافة middleware إلى API route في Next.js قم بإنشاء API route جديدة في مجلد `pages/api` في مشروع Next.js الخاص بك. يمكنك إنشاء ملف جديد مثل `example.js` في هذا المجلد.

في الملف الجديد `example.js`، قم بتعريف الـ API route واستيراد Express.js من Next.js:

import express from 'express';
const app = express();

// تعريف الـ API route
app.get('/api/example', (req, res) => {
  // منطق الـ API
});

export default app;

ثم بعد ذلك قم بإنشاء middleware واستخدامه في الـ API route. يمكنك استخدام `app.use()` لتعريف middleware وتطبيقه على الـ API route:

import express from 'express';
const app = express();

// Middleware
const myMiddleware = (req, res, next) => {
  // منطق الميدلوير
  console.log('تم تنفيذ الميدلوير');
  next(); // استدعاء next() للانتقال إلى المنطق التالي
};

// تطبيق الميدلوير على الـ API route
app.use(myMiddleware);

// تعريف الـ API route
app.get('/api/example', (req, res) => {
  // منطق الـ API
});

export default app;

هذه هي الخطوات الأساسية لإضافة middleware في API routes في Next.js باستخدام Express.js. يمكنك تعديل المثال واستخدام منطق الميدلوير الخاص بك في الواقع، مثل التحقق من الهوية أو إعداد بيانات الطلب قبل تنفيذ منطق الـ API الفعلي.