इस संक्षिप्त लेख में, मैं नेक्स्टजेएस के साथ मिडलवेयर बनाने के तरीके के बारे में लिखूंगा।

मैंने हाल ही में नेक्स्टजेएस के साथ एक पूर्ण विकसित बैकएंड सेवा बनाई है, और मैं वास्तव में यह देखकर आश्चर्यचकित रह गया कि नेक्स्टजेएस कितना आगे निकल चुका है।

इस लेख का अनुसरण करने के लिए आपको जावास्क्रिप्ट और नोडज का बुनियादी ज्ञान होना चाहिए।

आरंभ करने के लिए, आपको

1. नीचे दिए गए कमांड का उपयोग करके अपने टर्मिनल से एक नेक्स्टजेएस प्रोजेक्ट बनाएं

npx create-next-app@latest

इस कमांड को चलाने के बाद, आपको अपने प्रोजेक्ट को कॉन्फ़िगर करने के लिए कुछ संकेत मिलेंगे, ऐसा करें।

प्रोजेक्ट बनाने के बाद,

2. अपने टर्मिनल में npm install चलाकर आवश्यक निर्भरताएँ स्थापित करें

हम प्रमाणीकरण के लिए केवल एक पैकेज लाइब्रेरी स्थापित करेंगे, जो कि है, एक विकल्प jsonwebtoken हो सकता था, लेकिन नेक्स्टजेएस मिडलवेयर ब्राउज़र पर चलता है, इसलिए एज रनटाइम एक समूह को लागू नहीं करता है Node.js एपीआई

3. नीचे दिए गए आदेश का उपयोग करके अपना प्रोजेक्ट विकास मोड में प्रारंभ करें
एनपीएम रन देव

4. एक मिडिलवेयर.जेएस फ़ाइल बनाएं
अपने प्रोजेक्ट के मूल में एक मिडिलवेयर.जेएस फ़ाइल बनाएं, यदि आप /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)
   }
}

मुझे आशा है कि आपको ये 10 कदम मददगार लगेंगे, मुझे टिप्पणी अनुभाग में बताएं कि आप इस पद्धति के बारे में क्या सोचते हैं, और यदि इसे प्राप्त करने का कोई बेहतर तरीका है तो बेझिझक साझा करें।

धन्यवाद।