Next.js 는 pages 라는 폴더 하위에 파일을 작성하면 해당 페이지를 자동으로 라우팅해주는 편리한 기능을 제공한다.
ex ) pages/manual.tsx
⇒ /manual
하지만 pages 하위에 있는 모든 파일에 url로 직접 접근할 수 있도록 허용하는 것은 문제가 발생할 수 있다.
예를 들어 로그인 된 상태에서 /login
페이지에 접근한다든가, /error
페이지에 직접 접근한다든가 하는 문제가 있다.
실제로 프로젝트를 하던 도중 로그인된 상태에서 url로 /login
페이지에 접근할 수 있는 것🤦🏻♀️을 확인하고 고치게 되었다.
Next.js 는 특정 url 로 접근시 다른 path로 이동시켜주는 redirect 기능을 제공한다.
Next.js 프로젝트 폴더 루트에 있는 next.config.js 파일에서 설정할 수 있다.
//next.config.js
const nextConfig = {
...
async redirects() {
return [
{
source: '/login',
destination: '/',
permanent: true,
},
{
source: '/error',
destination: '/',
permanent: true,
},
];
},
...
};
module.exports = nextConfig;
source
에는 접근을 막을 페이지, destination
에는 redirect 할 페이지를 적어주면 된다.
permament
는 영구적으로 redirect 할 지 여부를 정하여 http 상태 코드를 307 혹은 308로 넘겨준다.
permanent 와 http status code 에 대해 자세히 알고 싶으면 아래 블로그 글을 참고하면 좋을 것 같다.
응원힙니다