[Next.js] url 로 특정 page에 직접 접근 막는 방법

Intro

Next.js로 구현된 프로젝트에서 특정 페이지들을 숨기는 요청사항이 들어왔습니다. 보통 Next.js는 pages라는 폴더 하위에 파일 혹은 폴드를 작성하게 되면 해당 파일/폴더를 자동으로 라우팅 해줍니다. 

 

처음 단순하게 NavBar 네비바에 있는 특정 link tag 를 주석처리했지만, url로 해당 페이지 직접 접근시 접근이 가능했습니다. 

 

How to do 

Next.js의 공식 문서를 살펴보면, Next.js는 Redirects라는 기능을 제공하고 있습니다. 위 기능은 Next.js 프로젝트 폴더 root에 있는 next.config.js 파일에서 설정할 수 있습니다. 

 

Redirects

Redirects allow you to redirect an incoming request path to a different destination path. 

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

Redirects 는 source, destination, permanent 속성이 포함된 객체를 포함하는 array이 반환되는 비동기 함수입니다. 

• source : 접근을 막을 페이지
• destination : redirect 할 페이지 
• permante : 영구적으로 redirect 할지의 여부 (true/false)

더 자세한 내용은 Next.js 공식문서를 참고하시면 좋을 것 같습니다. 

---

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