TIL

Next.js

리다이렉트

React에서의 리다이렉트

내가 주로 React에서 사용하던 리다이렉트를 돌이켜보면,

useNavigate()로 이용해 경로를 이동하는 함수를 호출하는 방식

const navigate = useNavigate();

fucntion handleClick() {
  navigate("/wherever");
}

Navigate 컴포넌트 이용하는 방식

function SomeComponent() {
  if (isNotReady)
    return <Navigate to="/home">;
  return <div>Component is Ready!</div>;
}

1번 방식은 주로 콜백 함수에서 경로 이동을 일으킬 때 사용되며,
useNavigate를 2번처럼 사용하려면, useEffect()에 담아서 사용하는 법이 있긴 하다.

하지만 그 또한 정확히 똑같게 동작하지는 않는데,
1번 방식의 경우 초기 렌더링 이후 useEffect()가 실행되므로, 기본 렌더링이 보여진 직후 페이지가 이동하는 깜빡임이 있다.
2번은 렌더링될 때 변경되므로 깜빡임 없이 완전히 경로가 이동하거나, 기본 렌더링이 보여지거나 둘 중 하나다.

2번의 Navigate 컴포넌트는 사용자가 페이지에 접근할 수 없는 조건임을 확인하고 바로 돌려보내줄 때 주로 사용했다. (예를 들어 로그인 전의 사용자가 로그인 이후의 페이지에 접근하려는 경우)

Next.js에서의 리다이렉트 (pages router)

그렇다면 Next.js에도 useNavigate()나 Navigate 같은 것들이 제공될까?

Next.js Docs : Linking and Navigating

`<Link>` 컴포넌트

Next.js Docs : <Link>

<Link> 컴포넌트는 Next.js에서 제공하는 a 태그처럼 하이퍼링크 역할을 하는 컴포넌트이다.

내가 생각하는 핵심 기능은 바로 pre-fetching!
이 기능은 디폴트로 켜져 있고, prefetch={false} 옵션을 전달하며 끌 수 있긴 하다.

좀 더 자세한 특징은,

뷰포트 내에 있는 링크들을 프리페치한다.
false의 경우 hover된 링크만 프리페치 된다.
프로덕션 모드에서만 동작한다.

`useRouter()` 훅

Next.js Docs : useRouter

useRouter()가 반환하는 router를 이용해서 router.push(), router.replace() 등의 동작을 할 수 있다.
이 뿐만 아니라 수동으로 router.prefetch()도 가능하다.

그 외

next.config.js 파일에 redirect 경로를 추가하는 방법도 있다.
Next.js Docs : redirects

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

또한 서버사이드에서 처리하는 방법도 있는데,
Next.js Docs : getServerSideProps/redirect

getServerSideProps에서 return에 redirect 객체를 담아 보내면, 리다이렉트가 진행되는 방식이다.
notFound 객체를 보내면, 404 에러 페이지로 리다이렉트 된다.

이는 getServerSideProps 뿐만 아니라 getStaticProps 등 다양한 서버 사이드 함수에서 지원하니 문서를 더 보면 되겠다!

TIL