next.js 브라우저 뒤로가기 이벤트 막기

next.js의 router object가 제공하는 beforePopState 함수를 통해 브라우저의 뒤로가기 이벤트를 제어할 수 있습니다. beforePopState 함수의 실행 흐름은 다음과 같습니다. 뒤로가기 버튼 클릭 → 브라우저 주소 변경 → router.beforePopState 실행 → router.beforePopState 함수가 false를 리턴하면 주소만 변경되고 실제로 화면을 이동하지 않음 beforePopState 함수를 이해하려면 브라우저가 어떻게 주소를 변경하고 페이지를 이동시키는지 이해해야 합니다. 간단하게 기술해보면 브라우저 백버튼 클릭 -> 브라우저 히스토리의 주소가 변경됨 (맨 위의 주소가 pop됨) -> popstate 이벤트가 실행되면서 페이지가 이동. beforePopState함수는 boolean 값으로 popstate 이벤트를 실행할지 결정할 수 있어서 실제 브라우저의 이동을 막을 수 있습니다. 여기서 한가지 중요한 것은 브라우저의 주소가 변경되는 것은 막을 수 없기 때문에 바뀐주소를 다시 원상태로 되돌려야 합니다. 그때는 보통 window.history.pushState 함수를 사용하여 브라우저 히스토리에 주소를 추가합니다 (pushState 함수는 popstate 이벤트를 발생시키지 않고 주소만 추가함) 말씀하신 기능 요구사항에 맞추어 코드를 작성하면 대략 다음과 같을 것 같네요! useEffect(() => { router.beforePopState(state => { window.history.pushState(null, '', router.asPath); OpenModal().then(({ isConfirmed }) => { if (isConfirmed) { router.beforePopState(() => true); router.back(); } }); return false; }); }, []);

네, next.js에서 브라우저 백버튼 이벤트를 감지하는 방법이 있습니다. 이를 위해 next.js는 Router를 제공합니다. Router를 사용하면 페이지 전환시에 브라우저 히스토리에 pushState() 메소드를 사용하여 URL을 추가하고, popstate 이벤트를 이용하여 브라우저 백버튼을 감지할 수 있습니다. 따라서, 모달을 띄웠을 때는 pushState() 메소드를 사용하여 URL을 추가하고, popstate 이벤트를 이용하여 브라우저 백버튼을 감지하면 됩니다. 아래는 예시 코드입니다. 이렇게 구현하면, 모달이 떠있는 동안에는 브라우저 백버튼을 눌러도 모달이 닫히지 않고, 모달에서 확인 버튼을 눌렀을 때에만 브라우저 백버튼이 동작하여 페이지가 이전 페이지로 이동합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function Modal() {
  const router = useRouter();

  useEffect(() => {
    function handleRouteChange() {
      // 모달을 닫음
      closeModal();
    }

    // 페이지 전환시 발생하는 이벤트
    window.history.pushState(null, null, window.location.pathname);
    window.addEventListener('popstate', handleRouteChange);

    return () => {
      window.removeEventListener('popstate', handleRouteChange);
    };
  }, []);

  function closeModal() {
    // 모달을 닫고 페이지에 머무르게 함
    router.replace(router.asPath);
  }

  return (
    // 모달 컴포넌트
  );
}