How to Handle Route Change Triggers and Show Popup in Next.js 15

[ahmerarain]

Hi everyone,

I’m working on a Next.js 15 project (JavaScript, not TypeScript) where I need to show a popup when the user is about to leave a page. The popup should notify the user that they’ll lose data if they proceed with actions such as:

1. Reloading the page
2. Navigating back or forward in the browser
3. Clicking on internal links to change the route

I would like the user to have the option to either:

1. Confirm leaving the page and lose the data
2. Stay on the page if they don’t want to lose their data

Here’s what I’ve done so far:

1. I’m using the beforeunload event to handle page reloads and tab closures.

However, I’m still working on how to perfectly manage both situations (reload and internal route change) while showing the popup.

Does anyone have suggestions or examples of how to handle this in a clean way? Any help would be appreciated!

Thanks!