[Next.js@13] redirect와 cookie 설정 한번에 하기

[Next.js@13] redirect와 cookie 설정 한 번에 하기

jwt인증 미들웨어를 짜던 도중에 쿠키를 삭제하고, 리다이렉트 시키는 것을 구현하다가 좀 많이 헤매서 남긴다.

 

우선 공식 문서에서 알려주는 redirect와 cookie 설정 방법이다.

//middleware.ts

//리다이렉트 - 지정한 URL로 리다이렉트 시킨다.
export async function middleware(req: NextRequest) {
          return NextResponse.redirect(new URL('/', req.url));
}

//쿠키 설정 - Token을 삭제하고 미들웨어 체인을 이어서 진행한다.
export async function middleware(req: NextRequest) {
          const response = NextResponse.next();
          response.cookies.delete('Token');
          return response;
}

 

이를 합치려면 아래 코드처럼 사용한다.

쿠키도 삭제되고, 리다이렉트도 정상 작동한다.

export async function middleware(req: NextRequest) {
          const response = NextResponse.redirect(new URL('/', req.url));
          response.cookies.delete('Token');
          return response;
}