In diesem kurzen Artikel werde ich darüber schreiben, wie man eine Middleware mit nextjs erstellt.

Ich habe kürzlich einen vollständigen Backend-Dienst mit nextjs aufgebaut und war wirklich überwältigt davon, wie weit nextjs schon fortgeschritten ist.

Sie benötigen Grundkenntnisse in Javascript und NodeJS, um diesem Artikel folgen zu können.

Um zu beginnen, müssen Sie

1. Erstellen Sie ein nextjs-Projekt von Ihrem Terminal aus mit dem folgenden Befehl

npx create-next-app@latest

Nachdem Sie diesen Befehl ausgeführt haben, werden Sie aufgefordert, Ihr Projekt zu konfigurieren. Tun Sie dies.

Nach dem Erstellen des Projekts

2. Installieren Sie die erforderlichen Abhängigkeiten, indem Sie npm install in Ihrem Terminal ausführen

Wir werden nur eine Paketbibliothek für die Authentifizierung installieren, nämlich jose, eine Alternative hätte jsonwebtoken sein können, aber die Middleware von nextjs wird im Browser ausgeführt, sodass die Edge-Runtime viele davon nicht implementiert Node.js-APIs

3. Starten Sie Ihr Projekt im Entwicklungsmodus mit dem folgenden Befehl
npm run dev

4. Erstellen Sie eine middleware.js-Datei
Erstellen Sie eine middleware.js-Datei im Stammverzeichnis Ihres Projekts. Wenn Sie das Verzeichnis /src verwenden, erstellen Sie die Datei im Verzeichnis /src

5. Exportieren Sie eine Middleware-Funktion aus der Datei

// /middleware.js

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

6. Token aus Anforderungsheader extrahieren

// /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. Überprüfen Sie das Token mit 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. Extrahieren Sie Daten aus dem verifizierten Token und legen Sie sie im Anforderungsheader fest

// /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. Rufen Sie die Funktion next() auf und übergeben Sie den aktualisierten Anforderungsheader

// /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. Schließlich müssen Sie ein Konfigurationsobjekt aus der Middleware-Datei exportieren, das Konfigurationen zu den Routen enthält, die Sie schützen möchten.

// /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)
   }
}

Ich hoffe, Sie finden diese 10 Schritte hilfreich. Teilen Sie mir im Kommentarbereich mit, was Sie von dieser Methode halten, und teilen Sie mir gerne mit, ob es auch einen besseren Weg gibt, dies zu erreichen.

Danke schön.