Nextjs에서 Redirect하기

오늘은 Nextjs를 공부하다 Redirect하는 방법에 대해 알게 되었는데 흥미로운 기술이라 생각해
글을 써보려고 합니다.
 

Redirect란

리다이렉트란 말 그대로 re(다시) + direct(지시하다) 다시 지시하는 것을 말합니다.
예를 들어 로그인 후 이동할 수 있는 페이지를 유저가 로그인하지 않은 상태로 url 요청을 보냈다면
서버에서 HTTP 응답 메시지를 통해 로그인 페이지 URL을 지시할 수 있는 것을 리다이렉트라 합니다.
 

Nextjs에서 Redirect하는 방법

일단 첫 번째로 루트 디렉토리에 있는 next.config.js로 이동합니다.
 
그리고 위와 같은 코드가 있는데 reactStrictMode: true, 아래에 다음과 같이 코드를 작성합니다.
여기서 redirects()는 source, destination, permanent 속성이 있는 객체 배열을 반환하는 비동기 함수입니다.
  • source : request 경로
  • destination : redirect할 경로
  • permanent : true or false
    • true인 경우 클라이언트와 검색 엔진에 redirect를 영구적으로 cache하도록 지시하는 308 status code를 사용
    • false인 경우 일시적이고 cache되지 않은 307 status code를 사용
 
여기서 request 경로가 동적 경로라면 :path, :path*를 붙여 설정할 수 있습니다.