[Next.js] - Private Route

Private Routing in Next.js

---

✅ Next 프레임워크에서 로그인된 유전, 관리자 등 조건부를 통해 권한을 가진 자만 접근할 수 있는 페이지 라우팅

• HOC - Higer Order Component

PrivateRoute.tsx:

const withAuth = (Component: NextPage | React.FC) => {
  const Auth = () => {
    // redux store | context 등의 상태를 통해 조건부 처리를 한다
    const isLoggedIn = useSelector((store) => user.isLoggedIn);

    if (!isLoggedIn) {
      // Login 컴포넌트를 출력하거나
      // 이미 로그인 화면이 구현된 페이지를 사용하고 싶다면 useRouter()를 통해 라우팅
      return <>login page</>;
    }
    // 로그인이 되어있다면
    return <Component />;
  };

  return Auth;
};

export default withAuth;

사용 :

const authPage: NextPage = () => {
  return <>Hello</>;
};

export default withAuth(authPage);