next.js middleware란?

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

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

---

middleware란?

middleware

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

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

사용자 인증, 리다이렉션, 요청 헤더 수정, A/B 테스트와 같은 기능을 구현할 때 사용됩니다

---

사용하기

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 함수 내보내기

Matcher

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

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

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

---

글을 마치며

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

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

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