Add the "Changes you made may not be saved" warning to a Next.js app

useBeforeUnload.ts

import { Router } from "next/router";
import { useCallback, useEffect } from "react";

export const useBeforeUnload = (
  enabled: boolean | (() => boolean) = true,
  message = "Changes you made may not be saved.",
) => {
  const handler = useCallback(
    (event: BeforeUnloadEvent) => {
      const finalEnabled = typeof enabled === "function" ? enabled() : true;

      if (!finalEnabled) {
        return;
      }

      event.preventDefault();

      if (message) {
        event.returnValue = message;
      }

      return message;
    },
    [enabled, message],
  );

  //Handle next.js route change
  useEffect(() => {
    const handler = () => {
      if (enabled && !window.confirm(message)) {
        throw "Route Canceled";
      }
    };

    Router.events.on("beforeHistoryChange", handler);

    return () => {
      Router.events.off("beforeHistoryChange", handler);
    };
  }, [enabled, message]);

  useEffect(() => {
    if (!enabled) {
      return;
    }

    window.addEventListener("beforeunload", handler);

    return () => window.removeEventListener("beforeunload", handler);
  }, [enabled, handler]);
};

Add the "Changes you made may not be saved" warning to a Next.js app, support next.js router