Neste breve artigo, escreverei sobre como construir um middleware com nextjs.

Recentemente, construí um serviço de back-end completo com nextjs e fiquei realmente impressionado com o quão longe o nextjs está.

Você precisa ter conhecimentos básicos de javascript e nodejs para seguir este artigo.

Para começar, você precisa

1. Crie um projeto nextjs a partir do seu terminal usando o comando abaixo

npx create-next-app@latest

Depois de executar este comando, você receberá um prompt para configurar seu projeto, faça isso.

Depois de criar o projeto,

2. Instale as dependências necessárias executando npm install em seu terminal

Estaremos instalando apenas uma biblioteca de pacotes para autenticação, que é jose, uma alternativa poderia ter sido jsonwebtoken, mas o middleware nextjs roda no navegador, então o tempo de execução do edge não implementa um monte de APIs Node.js

3. Inicie seu projeto em modo de desenvolvimento usando o comando abaixo
npm executar dev

4. Crie um arquivo middleware.js
Crie um arquivo middleware.js na raiz do seu projeto, se você estiver usando o diretório /src, crie o arquivo dentro do diretório /src

5. Exporte uma função de middleware do arquivo

// /middleware.js

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

6. Extraia o token do cabeçalho da solicitação

// /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 o 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. Extraia dados do token verificado e defina-os no cabeçalho da solicitação

// /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. Chame a função next() e passe o cabeçalho da solicitação atualizado

// /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, você precisa exportar um objeto de configuração do arquivo de middleware que contém configurações sobre as rotas que você deseja 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 essas 10 etapas sejam úteis. Deixe-me saber o que você pensa sobre esse método na seção de comentários e sinta-se à vontade para compartilhar se há uma maneira melhor de conseguir isso também.

Obrigado.