[NextJs] Redirect & Rewrite

Redirect와 Rewrite는 입력된 url을 원하는 페이지로 이동시키는 기능을 말한다. 이 둘의 차이는 주소창에 바뀐 url이 보이냐 안보이냐의 차이이며 즉, 이는 유저가 주소의 변화를 알 수 있느냐의 차이이이다. next.config.ts파일에서 설정한다.

Redirect

주소창에 입력된 특정 주소를 원하는 주소지로 이동시키며 주소창에 변화가 생기기 때문에 유저가 주소창의 주소 변화를 알 수 있다.

next.config.ts파일 안에 아래와 같이 작성한다. source는 입력한 경로, destination은 이동할 경로, permenent가 true면 영구적으로 브라우저 단 검색엔진이 이 경로를 기억하는 것을 말한다.

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

경로에는 일반 경로, wildcard 경로, 정규표현식 경로, 헤더, 쿠키, 쿼리 정보 등 다양하게 사용가능하다. 자세한 내용은 공식 홈페이지(클릭) 참고.

Rewrites

Redirect와 마찬가지로 주소창에 특정 주소를 입력하면 워하는 주소로 이동한다. 다만 유저는 이동하는 주소를 알 수 없다.

기본적인 작성 방법은 아래와 같이 next.config.ts에 작성한다.

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

Redirect와 마찬가지로 다양한 경로를 지원하니 공식 홈페이지(클릭) 참고