[Next.js] redirects로 경로 변경해서 연결하는 방법

  

redirects (URL 변경됨)

redirect를 사용하면 들어오는 request 경로를 다른 destination 경로로 Redirect 할 수 있습니다. 즉, redirect를 이용해서 한 페이지에서 다른 페이지로 이동하게 할 수도 있고, 아예 다른 URL의 웹사이트로 이동하게 할 수 있습니다. redirect를 사용하려면 next.config.js에서 redirects 키를 이용하면 됩니다.

[next.config.js]

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: "/content",
        destination: "/about",
        permanent: false
      }
    ]
  }
}

module.exports = nextConfig

 

redirects은 source, destination 및 permanent 속성이 있는 객체를 포함하는 배열을 반환하는 비동기 함수입니다.

키	설명	예	비고
source	들어오는 요청 경로 패턴	/content
destination	라우팅하려는 경로	/about https://naver.com	project 외부로도 이동 가능
permanant	브라우저나 검색엔진이 이 정보를 기억하는지 여부 결정

 

next.config.js 파일을 수정하면 적용하기 위해서는 서버를 재시작해야 된다고 알려줍니다. 확인을 위해 서버를 재시작해 줍니다.

 

[실행 결과]

주소에 content를 치고 들어갔는데 about에 redirect 된 것을 확인할 수 있습니다.

 

 

References

https://nextjs.org/docs/api-reference/next.config.js/redirects

https://nomadcoders.co/nextjs-fundamentals/lectures/3447