Want to have an event handler for the browser's back button with next.js

Question

I am having a modal which while opening pushes a hash to url example.com/#modal, on browser back button click, I want to recognise that event so that I can toggle the state of modal. the point is, since Im using it with next.js (server side rendering), I will not be having access to window object (correct me if I am wrong). so I need an alternate way to handle the event of browser back button.

Answer 1

You can use next/router's beforePopState to act on changes to the session history navigation (back/forward actions), and make sure it'll only happen when leaving the current page.

useEffect(() => {
    router.beforePopState(({ as }) => {
        if (as !== router.asPath) {
            // Will run when leaving the current page; on back/forward actions
            // Add your logic here, like toggling the modal state
        }
        return true;
    });

    return () => {
        router.beforePopState(() => true);
    };
}, [router]); // Add any state variables to dependencies array if needed.

Answer 2

Fantastic answer by @juliomalves. However, we need to handle URLs properly. Once you return false from router.beforePopState handler, page will not be updated. However, url is changed. And this is not what we want. So, it has to be copleted as per following code.

useEffect(() => {
    router.beforePopState(({ as }) => {
        const currentPath = router.asPath; 
        if (as !== currentPath) {
            // Will run when leaving the current page; on back/forward actions
            // Add your logic here, like toggling the modal state
            // for example           
            if(confirm("Are you sure?") return true;
            else {
               window.history.pushState(null, "", currentPath);
               return false;
            }
        }
        return true;
    });

    return () => {
        router.beforePopState(() => true);
    };
}, [router]); // Add any state variables to dependencies array if needed.

Answer 3

@Summy I hope your issue is resolved by now. If not you can try this for the browser back button:- Next.js + React Go back to the previous page If you want to use hashbang URLs you can't use SSR, since /# and /#/one is the same route server-side, so there is no way for the server to know what to render, it will need to send a basic template and let the client fill it, in that case, I think using CRA or Parcel with React Router and its HashRouter is a better option, that way you will have a single index.html and let the client decide what to render.

Answer 4

in NextJs we can use beforePopState function and do what we want such close modal or show a modal or check the back address and decide what to do

https://stackoverflow.com/a/60702584/4717739

https://stackoverflow.com/a/69560739/4717739

Answer 5

I've tried above solution but unfortunately didn't work for me. I've managed to overcome given issues for following scenario: Open modal on browsers "go back" action. I had problem when I click on back button, I was getting opened modal but current url was changed to the previous url.

export default function BrowserGoBackAction() {


const [showGoBackDialog, setShowGoBackDialog] = useState(false);

  const router = useRouter();

  async function OpenGoBackDialog() {
    setShowGoBackDialog(true);
  }

  useEffect(() => {
    router.beforePopState(({ as }) => {
      //   Detect browsers go back action
      if (as !== router.asPath) {
        window.history.pushState(null, null, router.asPath);
        OpenGoBackDialog();
      }
    });
  });

  function goToPreviousPage() {
    router.beforePopState(() => true);
    return router.back();
  }

  function onCancel() {
    setShowGoBackDialog(false);
  }
}

Answer 6

Any of the above solution is not working for my next js application.I found a different way to handle this issue although it is using the hash which will be a unique modalId and we will monitor the hash change via router.asPath and close the modal accordingly.

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export const useRestrictModalNavigation = (
    show: boolean,
    onHashRemoved?: () => void
) => {
const router = useRouter();
const setModalHash = (modalId: string) => {
    window.history.pushState({}, '', `#${modalId}`);
};

const handleClose = () => {
    if (onHashRemoved) onHashRemoved();
    clearModalHash();
};
useEffect(() => {
    if (show) {
        setModalHash('modal');
    } else {
        clearModalHash();
    }
}, [show]);

useEffect(() => {
    const handleHashChange = () => {
        const { hash } = window.location;
        console.log('Hash changed:', hash);
        if (!hash) if (onHashRemoved) onHashRemoved();
    };

    window.addEventListener('hashchange', handleHashChange);

    return () => {
        window.removeEventListener('hashchange', handleHashChange);
    };
}, [router.asPath]);

    return { handleClose };
};

const clearModalHash = () => {
    const { protocol, host, pathname, search } = window.location;
    const newUrl = `${protocol}//${host}${pathname}${search}`;
    window.history.replaceState({}, document.title, newUrl);
};