Utilizing 'next/router' in a similar manner to the Next.js page for socket disconnection.

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

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

  useEffect(() => {
    const disconnectSocket = () => {
      console.log("Disconnecting socket...");
    };

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

    return () => {
      console.log("Component unmounted...");
      router.events.off("routeChangeStart", disconnectSocket);
    };
  }, []);

  return <>My Page</>;
}

router.beforePopState is an effective method for handling browser back buttons, but it may not work as well for <Link> elements on the page.

If you're looking for an alternative solution, check out this resource: https://github.com/vercel/next.js/issues/2694#issuecomment-732990201

For those seeking another option, here's a modified version of the code snippet mentioned above to address specific requirements:

// Notify users of unsaved changes before leaving the page  
useEffect(() => {
  const warningText =
    'You have unsaved changes - are you sure you wish to leave this page?';
  const handleWindowClose = (e: BeforeUnloadEvent) => {
    if (!unsavedChanges) return;
    e.preventDefault();
    return (e.returnValue = warningText);
  };
  const handleBrowseAway = () => {
    if (!unsavedChanges) return;
    if (window.confirm(warningText)) return;
    router.events.emit('routeChangeError');
    throw 'routeChange aborted.';
  };
  window.addEventListener('beforeunload', handleWindowClose);
  router.events.on('routeChangeStart', handleBrowseAway);
  return () => {
    window.removeEventListener('beforeunload', handleWindowClose);
    router.events.off('routeChangeStart', handleBrowseAway);
  };
}, [unsavedChanges]);

Based on testing, this approach has proven to be quite reliable.

Alternatively, you can manually add an onClick event handler to every <Link> element yourself.

Although browsers have strict limitations on permissions and features, the following workaround has been found effective:

• window.confirm: for handling next.js router events
• beforeunload: for managing browser reloads, tab closures, or navigation away from the page

import { useRouter } from 'next/router'

const MyComponent = () => {
  const router = useRouter()
  const unsavedChanges = true
  const warningText =
    'You have unsaved changes - are you sure you wish to leave this page?'

  useEffect(() => {
    const handleWindowClose = (e) => {
      if (!unsavedChanges) return
      e.preventDefault()
      return (e.returnValue = warningText)
    }
    const handleBrowseAway = () => {
      if (!unsavedChanges) return
      if (window.confirm(warningText)) return
      router.events.emit('routeChangeError')
      throw 'routeChange aborted.'
    }
    window.addEventListener('beforeunload', handleWindowClose)
    router.events.on('routeChangeStart', handleBrowseAway)
    return () => {
      window.removeEventListener('beforeunload', handleWindowClose)
      router.events.off('routeChangeStart', handleBrowseAway)
    }
  }, [unsavedChanges])

}
export default MyComponent

Special thanks to the author of this article

One option is to utilize the router.beforePopState method, which you can explore further by referring to this source for detailed examples

When I was developing this code, I focused on two key things:

• Determining when the nextjs router would be activated
• Identifying when specific browser events would occur

To address these concerns, I created a hook that is designed to trigger in response to either the use of the next router or certain browser events such as closing a tab or refreshing the page.

import SingletonRouter, { Router } from 'next/router';

export function usePreventUserFromErasingContent(shouldPreventLeaving) {
  const stringToDisplay = 'Do you want to save before leaving the page ?';

  useEffect(() => {
    // Prevents tab quit / tab refresh
    if (shouldPreventLeaving) {
      // Adding window alert if the shop quits without saving
      window.onbeforeunload = function () {
        return stringToDisplay;
      };
    } else {
      window.onbeforeunload = () => {};
    }

    if (shouldPreventLeaving) {
      // Prevents next routing
      SingletonRouter.router.change = (...args) => {
        if (confirm(stringToDisplay)) {
          return Router.prototype.change.apply(SingletonRouter.router, args);
        } else {
          return new Promise((resolve, reject) => resolve(false));
        }
      };
    }
    return () => {
      delete SingletonRouter.router.change;
    };
  }, [shouldPreventLeaving]);
}

To implement this functionality in your component, simply call the hook with the appropriate arguments:

usePreventUserFromErasingContent(isThereModificationNotSaved);

I have utilized a boolean variable created using useState, which can be updated as needed to control when the hook should be triggered.

If you want to implement a custom event handler in your react page or component, you can use the default web api's eventhandler.

if (process.browser) {
  window.onbeforeunload = () => {
    // Add your callback function here
  }
}

For me, this solution was successful when using next-router with React Functional Components.

1. Include the router event handler
2. Add an onBeforeUnload event handler
3. Ensure they are unloaded when the component is unmounted

Check out the full details here

Handle Changes in Route Intercepting with the NextJS App Router Mode

Check out the demo on: [https://github.com/cgfeel/next.v2/assets/578141/fe1e7f24-054a-4f56-892c-5345ac177a75

You can find the source code at: https://github.com/cgfeel/next.v2/tree/master/routing-file/src/app/leaving/proxy

To implement this Provider in your layout, navigate to the app's root directory using: https://github.com/cgfeel/next.v2/blob/master/routing-file/src/components/proxyProvider/index.tsx

'use client'

import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { FC, PropsWithChildren, createContext, useEffect, useState } from "react";

const ProxyContext = createContext<ProxyInstance>([undefined, () => {}]);

const ProxyProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
    const [tips, setTips] = useState<string|undefined>();
    const msg = tips === undefined ? tips : (tips||'Are you sure want to leave this page?');

    const pathname = usePathname();
    const searchParams = useSearchParams();

    const url = [pathname, searchParams].filter(i => i).join('?');
    useEffect(() => {
        setTips(undefined);
    }, [url, setTips]);

    useEffect(() => {
        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
            if (msg === undefined) return msg;
            
            event.preventDefault();
            event.returnValue = msg;
            
            return msg;
        };

        const script = document.getElementById('proxy-script');
        if (script) {
            script.dataset.msg = msg||'';
            script.dataset.href = location.href;
        }

        window.addEventListener("beforeunload", handleBeforeUnload);
        return () => {
            window.removeEventListener("beforeunload", handleBeforeUnload);
        }
    }, [msg]);

    return (
        <ProxyContext.Provider
            value={[msg, setTips]}
        >
            <Script
                strategy="afterInteractive"
                id="proxy-script"
                dangerouslySetInnerHTML={{
                    __html: `(() => {
                        const originalPushState = history.pushState.bind(history);
                        let currentPoint = 0;
                        let point = 0;
                        window.history.pushState = function(state, title, url) {
                            state.point = ++point;
                            currentPoint = point;
                            originalPushState(state, title, url);
                        };
                        const originalReplaceState = history.replaceState.bind(history);
                        window.history.replaceState = function(state, title, url) {
                            state.point = currentPoint;
                            originalReplaceState(state, title, url);
                        };
                        window.addEventListener('popstate', function (event) {
                            const { state: nextState } = event;
                            const isback = currentPoint > nextState.point;

                            currentPoint = nextState.point;

                            const script = document.getElementById('proxy-script');
                            if (!script || location.href === script.dataset.href) return;

                            const msg = script.dataset.msg||'';
                            const confirm = msg == '' ? true : window.confirm(msg);
                            if (!confirm) {
                                event.stopImmediatePropagation();
                                isback ? history.forward() : history.back();
                            }
                        });
                    })()`,
                }}
            ></Script>
            {children}
        </ProxyContext.Provider>
    );
};

export type ProxyInstance = [
    string|undefined, (tips?: string) => void
]

export { ProxyContext };

export default ProxyProvider;

Check out my latest article on Medium about how to Prevent Route Changes and Avoid Data Loss in Next.js by using the code snippet below:

import SingletonRouter, { Router } from 'next/router';
import { useEffect } from 'react';

const defaultConfirmationDialog = async (msg?: string) => window.confirm(msg);

/**
 * React Hook
 */
export const useLeavePageConfirmation = (
  shouldPreventLeaving: boolean,
  message: string = 'Changes you made may not be saved.',
  confirmationDialog: (msg?: string) => Promise<boolean> = defaultConfirmationDialog
) => {
  useEffect(() => {
    // @ts-ignore because "change" is private in Next.js
    if (!SingletonRouter.router?.change) {
      return;
    }

    // Rest of the code remains the same...
    
  }, [shouldPreventLeaving, message, confirmationDialog]);
};

Revamped Solution for 2023

This innovative solution is tailored for the pages directory (not yet tested on app!)

Here's how it operates:

1. Utilizes router change events to monitor page transitions without refreshing
2. Makes use of window.onbeforeunload event to detect when a user closes the tab or refreshes the page

Implementation:

Insert this code snippet into your _app.js file. Alternatively, you can place it in a specific page, but it will only function for that particular page. Another option is to create a separate file for this purpose and import it wherever necessary.

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

    router.events.on("routeChangeStart", exitingFunction);
    window.onbeforeunload = exitingFunction;

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