[Next.js] 비회원이 로그인 후 원래 있던 페이지로 돌아올 수 있도록 하기

서비스 내에서 회원만 이용 가능한 기능이 있다면, 아래와 같이 로그인 페이지로 이동할 수 있는 모달을 띄워준다. 

 

 

사용자가 저 버튼을 클릭해서 로그인을 하고 난 뒤, 원래 보고 있던 페이지로 돌아올 수 있도록 해야 한다.

 

import { usePathname, useRouter } from 'next/navigation';

const router = useRouter();
const pathname = usePathname();
...

router.replace('/login?redirect=' + pathname);

 

간단하게는 위와 같이 구현할 수 있다.

 

하지만 만약 검색 페이지라서, 복잡한 필터기능이 있고 searchParams가 주소 뒤에 줄줄 많이 달려있는 상황일 수도 있다.

 

UX 관점에서

1. 사용자가 필터 항목을 10개 설정함

2. 로그인하라고 막고

3. 시키는대로 로그인 하고 왔더니 설정했던 필터가 모두 풀려있으면?

4. 화가 난다

 

 

searchParams까지 같이 묶어서 redirect 시켜주고 싶을 땐 아래 코드를 추가한다.

const searchParams = useSearchParams();
const encodedRedirectUrl = searchParams.get('redirect');
const redirectUrl = decodeURIComponent(encodedRedirectUrl ?? '');
  
...
  
if (redirectUrl) {
  return router.replace(redirectUrl);
}