[Next.js] url을 통해 특정 페이지에 직접 접근하는 것 막기 ~Redirect~

문제 인식

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 에 대해 자세히 알고 싶으면 아래 블로그 글을 참고하면 좋을 것 같다.

참고

Nextjs Redirect 옵션에 Permanent는 뭐지?