في هذه المقالة القصيرة، سأكتب عن كيفية بناء برنامج وسيط باستخدام nextjs.

لقد قمت مؤخرًا ببناء خدمة خلفية كاملة مع nextjs، وقد أذهلتني حقًا مدى التقدم الذي حققته nextjs.

يجب أن يكون لديك معرفة أساسية بجافا سكريبت وnodejs لمتابعة هذه المقالة.

للبدء، تحتاج إلى

1. قم بإنشاء مشروع nextjs من جهازك الطرفي باستخدام الأمر أدناه

npx create-next-app@latest

بعد تشغيل هذا الأمر، سوف تحصل على بعض المطالبات لتهيئة مشروعك، قم بذلك.

بعد إنشاء المشروع،

2. قم بتثبيت التبعيات الضرورية عن طريق تشغيل npm install في جهازك

سنقوم بتثبيت مكتبة حزمة واحدة فقط للمصادقة، وهي jose، وكان من الممكن أن يكون البديل jsonwebtoken، لكن البرنامج الوسيط nextjs يعمل على المتصفح، لذلك لا ينفذ وقت تشغيل الحافة مجموعة من واجهات برمجة تطبيقات Node.js

3. ابدأ مشروعك في وضع التطوير باستخدام الأمر أدناه
npm تشغيل ديف

4. إنشاء ملف middleware.js
قم بإنشاء ملف middleware.js في جذر مشروعك، إذا كنت تستخدم الدليل /src، فقم بإنشاء الملف داخل الدليل /src

5. تصدير وظيفة وسيطة من الملف

// /middleware.js

export const middleware = async (req) => {
   try {
   } catch(error){
   console.log(error)
   }
}

6. استخراج الرمز المميز من رأس الطلب

// /middleware.js

import { NextResponse } from 'next/server'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
   } catch(error){
   console.log(error)
   }
}

7. تحقق من الرمز المميز باستخدام jose

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

// your encoded data will be inside the payload object.

   } catch(error){
   console.log(error)
   }
}

8. استخراج البيانات من الرمز المميز الذي تم التحقق منه وتعيينه في رأس الطلب

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)
   } catch(error){
   console.log(error)
   }
}

9. اتصل بالوظيفة التالية () وقم بتمرير رأس الطلب المحدث

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)

    return NextResponse.next({
               request: {
                headers: requestHeaders
               } 
    })
   } catch(error){
   console.log(error)
   }
}

10. أخيرًا، تحتاج إلى تصدير كائن تكوين من ملف البرنامج الوسيط الذي يحتوي على تكوينات حول المسارات التي تريد حمايتها.

// /middleware.js

import { NextResponse } from 'next/server';
import * as jose from 'jose'

export const config = {
  matcher:[
   // contain list of routes you want to protect, e.g /api/users/:path*
]
}

export const middleware = async (req) => {
   try {
    const header = req.headers.get('authorization');
        if(!header) return NextResponse.json({
             status:'error'
             statusCode: 400,
             message:'unauthenticated'
         })

   const token = header.split(" ")[1];
        if(!token) return NextResponse.json({
             status:'error'
             statusCode: 401,
             message:'You are not logged in'
         })
    const { payload } = await jose.jwtVerify(
      token,
      new TextEncoder().encode(process.env.NEXT_PUBLIC_JWT_KEY)
    );

    const requestHeaders = new Headers(req.headers)
    requestHeaders.set('user', payload.id)

    return NextResponse.next({
               request: {
                headers: requestHeaders
               } 
    })
   } catch(error){
   console.log(error)
   }
}

أتمنى أن تجد هذه الخطوات العشر مفيدة، واسمحوا لي أن أعرف رأيك حول هذه الطريقة في قسم التعليقات، ولا تتردد في مشاركة ما إذا كانت هناك طريقة أفضل لتحقيق ذلك أيضًا.

شكرًا لك.