Detect when a user leaves page in Next JS

Question

I would like to detect when the user leaves the page Next JS. I count 3 ways of leaving a page:

1. by clicking on a link
2. by doing an action that triggers router.back, router.push, etc...
3. by closing the tab (i.e. when beforeunload event is fired

Being able to detect when a page is leaved is very helpful for example, alerting the user some changes have not been saved yet.

I would like something like:

router.beforeLeavingPage(() => {
    // my callback
})

Answer 1

I use 'next/router' like Next.js page to disconnect a socket

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

export default function MyPage() {
  const router = useRouter();

  useEffect(() => {
    const exitingFunction = () => {
      console.log("exiting...");
    };

    router.events.on("routeChangeStart", exitingFunction);

    return () => {
      console.log("unmounting component...");
      router.events.off("routeChangeStart", exitingFunction);
    };
  }, []);

  return <>My Page</>;
}