[NEXTJS] APP route에서의 redirect

Next의 App route가 안정화가 됐다는 소식을 듣고 pages를 버리고 route로 공부를 하고 있었다.

POST 메서드에서 redirect 문제

공식 문서의 Nextredirect 사용법

import { NextResponse } from 'next/server'
 
return NextResponse.redirect(new URL('/new', request.url))

문제점

• 무한 로딩이 걸린다.
• GET 메서드에서의 redirect는 잘 작동되나 POST 메서드에서의 redirect가 작동이 되지 않는다.

원인 파악

• redirect 해야할 페이지가 307로 들어오고 있다.

• 307 코드란

  • 요청된 리소스가 일시적으로 다른 URI로 이동되었음을 나타내지만, 이전의 HTTP 메소드가 변경되지 않아야 함을 명시해야한다. 즉, POST 요청에 대한 307 리다이렉션은 여전히 POST로 유지되어 새로운 URI로 요청된다.

• 즉 redirect 페이지가 POST로 들어오고있다.

• 이유?

  • NextResponse.redirect는 핸들러가 아닌 미들웨어 혹은 그런 부분에서 사용되는 것, 요청이 온 그대로 보내는 것이 원래의 목적
  • 하지만 나는 지금 당장 이 기능을 라우팅으로 사용하고싶다

해결 방법

1. 클라이언트 측에서 response를 체크해 페이지를 이동한다.
2. 상태코드를 바꾼다
   • redirect의 내부 코드

     static redirect(url: string | NextURL | URL, init?: number | ResponseInit): NextResponse<unknown>;

   • ResponseInit을 변경할 수 있다.
   • 바꾼 코드

      return NextResponse.redirect(newUrl, 302);

   • 
   • 잘 들어오는 것을 확인 할 수 있다.