Nextjs13 middleware 추가하기

서버 중간에 간섭하고 싶은 경우, Middleware 를 사용하시면 됩니다.

요청, 응답 사이에 간섭하는 것을 middleware 라고 부릅니다.

 

import { NextResponse } from 'next/server'

export async function middleware(request) {
  console.log(request.nextUrl) // 유저가 요청중인 URL
  console.log(request.cookies) // 유저가 보낸 쿠키
  console.log(request.headers) // 유저의 headers 정보
  
  NextResponse.next() // 통과
  // NextResponse.redirect() // 다른페이지 이동
  // NextResponse.rewrite() // 다른페이지 이동
}

 

- headers 에는 유저가 쓰는 브라우저, 언어, OS 정보 등이 들어있습니다.

- NextResponse 를 사용해서 라우팅을 관리할 수 있습니다.

- rewrite()는 다른 페이지 이동인데 브라우저 주소창에 뜨는 URL을 변경하지 않습니다.

 

여기서 이제 필요한 작업들을 할 수 있습니다.

예를 들어, 특정 페이지로 접속을 못하게 한다던가, 페이지 이동시 특정 로직을 실행시켜준다던가 등이 있습니다.