이 짧은 기사에서는 nextjs를 사용하여 미들웨어를 구축하는 방법에 대해 쓸 것입니다.

최근에 nextjs로 완전한 백엔드 서비스를 구축했는데, nextjs가 얼마나 발전했는지 보고 정말 놀랐습니다.

이 글을 따라가려면 javascript와 nodejs에 대한 기본 지식이 필요합니다.

시작하려면 다음을 수행해야 합니다.

1. 아래 명령을 사용하여 터미널에서 nextjs 프로젝트를 만듭니다.

npx create-next-app@latest

이 명령을 실행하면 프로젝트를 구성하라는 메시지가 표시됩니다.

프로젝트를 생성한 후

2. 터미널에서 npm install을 실행하여 필요한 종속성을 설치합니다.

인증을 위해 하나의 패키지 라이브러리인 jose만 설치합니다. 대안은 jsonwebtoken일 수도 있습니다. 하지만 nextjs 미들웨어는 브라우저에서 실행되므로 Edge 런타임은 여러 가지를 구현하지 않습니다. Node.js API

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. next() 함수를 호출하고 업데이트된 요청 헤더를 전달합니다.

// /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단계가 도움이 되기를 바랍니다. 댓글 섹션에서 이 방법에 대해 어떻게 생각하는지 알려주시고, 이를 달성하기 위한 더 좋은 방법도 자유롭게 공유해 주세요.

감사합니다.