Next.js redirects 설정

샘플 데이터를 작성하다가 redirects 설정이 필요한 페이지를 발견했고, 해당 페이지를 굳이 use client 를 써서 useRouter 훅을 써야하나 싶은 마음에 검색했다가 알게 되었다. 그리고 무엇보다 페이지딴에 클라이언트 컴포넌트라니 뭔가 찝찝한...

https://nextjs.org/docs/app/api-reference/next-config-js/redirects#header-cookie-and-query-matching

next.config.js Options: redirects | Next.js

 

해당 공식 문서에 따르면 next.cofig.js 파일 안 모듈 안에 비동기로 redirects 함수를 아래처럼 지정하고 배열을 return 해주면 된다고 한다.

module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

 

• source 는 사용자가 접근하는 주소
• destination 은 source에 접근하면 redirect 시킬 주소
• permanent 는 boolean 값이 들어가는데 
  • 참인 경우 클라이언트/검색엔진이 리디렉션을 영구적으로 캐시하도록 지시하는 308 상태 코드
  • 거짓인 경우 일시적이며 캐시되지 않는 307 상태 코드

 307 상태 코드는 임시 리다이렉트하는 것으로 메서드와 본문이 변경되지 않도록 보장하며 요청된 리소스가 위치 헤더에 지정된 URL로 일시적으로 이동했다는 의미를 가진다고 한다.

308 상태 코드는 요청된 리소스가 위치 헤더에 지정된 URL로 최종적으로 이동했음을 나타내고, 브라우저가 이 페이지로 리다이렉션 되고 검색 엔진이 리소스에 대한 링크를 업데이트 한다고 한다.

그래서 permanent 는 이 주소 변경이 일시적인지 영구적인지를 나타내는 속성으로 꼭 넣어줘야 한다.

 

공식문서에서 말하길 307, 308을 사용하는 이유는 기존 임시 리다이렉션에선 302, 영구 리다이렉션에선 301 을 사용하다가 브라우저딴에서 요청 방법을 GET으로 변경하면서 생긴 문제점을 307, 308로 변경하면서 명시적으로 보존하기 위해서라고 한다.

 

그렇다면 결과적으로 위의 예시에선 '/about' 으로 사용자가 접근하면 '/' 로 우회될 것이다.

이 주소 체계는 : 를 사용하여 동적 라우팅도 가능하므로 자세한 사항은 공식 문서를 참고하자!