En este breve artículo, escribiré sobre cómo crear un middleware con nextjs.

Recientemente construí un servicio backend completo con nextjs y quedé realmente impresionado con lo avanzado que está nextjs.

Necesitas tener conocimientos básicos de javascript y nodejs para seguir este artículo.

Para comenzar, necesitas

1. Cree un proyecto nextjs desde su terminal usando el siguiente comando

npx create-next-app@latest

Después de ejecutar este comando, recibirás un mensaje para configurar tu proyecto, hazlo.

Después de crear el proyecto,

2. Instale las dependencias necesarias ejecutando npm install en su terminal

Instalaremos solo una biblioteca de paquetes para la autenticación, que es jose, una alternativa podría haber sido jsonwebtoken, pero el middleware nextjs se ejecuta en el navegador, por lo que el tiempo de ejecución perimetral no implementa un montón de API de Node.js

3. Inicie su proyecto en modo de desarrollo usando el siguiente comando
npm ejecutar desarrollo

4. Crear un archivo middleware.js
Cree un archivo middleware.js en la raíz de su proyecto, si está usando el directorio /src, cree el archivo dentro del directorio /src

5. Exportar una función de middleware desde el archivo

// /middleware.js

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

6. Extraer token del encabezado de solicitud

// /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. Verifique el token usando 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. Extraiga datos del token verificado y configúrelo en el encabezado de la solicitud

// /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. Llame a la función next() y pase el encabezado de solicitud actualizado

// /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. Finalmente, necesita exportar un objeto de configuración desde el archivo de middleware que contiene configuraciones sobre las rutas que desea proteger.

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

Espero que estos 10 pasos te resulten útiles, déjame saber qué piensas sobre este método en la sección de comentarios y no dudes en compartir si también hay una mejor manera de lograrlo.

Gracias.