next.js middleware란?

최근에 코드를 보다가 우연히  middle.ts라는 파일을 보게 되었습니다

궁금하여서 서치하다가 이 middleware에 대해서 좀 더 알아보게 되어 이렇게 글을 써보게 되었습니다

---

middleware란?

middleware

Next.js에서의 middleware란 요청과 응답 사이에서 실행됩니다

특정 작업을 처리하거나 요청을 수정할 수 있는 함수입니다

middleware의 여러 기능

• 사용자 인증: 페이지나 API 경로에 접근하기 전 사용자 인증을 확인하고 권한이 없는 사용자는 접근을 제한합니다
• SSR 리다이렉션: 사용자의 지역이나 역할에 따라 다른 페이지로 자동으로 리다이렉션 할 수 있습니다
• 경로 재작성: 동적으로 경로를 재작성할 수 있습니다
• 봇 감지 및 차단: 자동화된 트래픽을 감지하고 필요한 조치를 취하여 리소스를 보호합니다
• 로그 및 분석: 요청 데이터를 수집하고 분석하여 통찰력을 제공합니다
• 기능 플래깅: 기능을 동적으로 활성화하거나 비활성화하여 기능 출시를 원활하게 관리할 수 있습니다

---

middleware 보안 문제

최근에 미들웨어에 보안 문제가 발생하였는데 바로 권한 인증을 우회할 수 있는 보안 취약점입니다

Next.js팀은 이번 취약점 대응이후 공식문서에서 미들웨어의 사용 사례중 인증과 관련된 내용을 삭제했습니다

그러므로 미들웨어는 1차 확인 정도로만 사용해야 한다고 합니다

---

사용하기

1. next 최신 버전으로 설치하기
2. 루트 디렉토리에 middleware.ts 파일 생성하기
3. middleware.ts 파일에서 middleware 함수를 내보냅니다

npm install next@latest # npm

yarn add next@latest # yarn

설치

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// 이 함수는 내부에서 `await`를 사용하는 경우 `async`로 표시될 수 있습니다
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// matcher
export const config = {
  matcher: '/about/:path*',
}

middleware 함수 내보내기 (/about/로 시작하는 모든 경로를 home으로 redirect 시키는 로직)

Matcher

matcher을 이용해서 특정 경로에서만 middleware를 실행하도록 필터링할 수 있습니다

단일경로나 여러 경로를 배열 구문으로 매칭할 수 있습니다

export const config = {
  matcher: ['/about/:path*', '/dashboard/:path*'],
}

---

글을 마치며

오늘은 다른 사람의 코드를 보다가 우연히 발견한 middleware에 대해서 배워보았는데 

next의 다른 부분도 더 잘 알아보고 같이 사용하면 효율이 배로 오를 것 같습니다 

글을 읽어주셔서 감사합니다 더 열심히 공부해보겠습니다!!