Unsaved Changes Navigation Guard (Next.js App Router)

When to use this skill

Trigger this skill when the user asks to:

Add a "discard unsaved changes?" confirm dialog to a create/edit page.
Block browser back button and show a confirm dialog before leaving.
Fix a broken navigation guard that works with UI buttons but fails on browser back (or vice versa).
Debug any of these symptoms:
- Browser back does nothing even though the button is enabled
- Dialog shows, confirm navigates to the wrong page
- Clicking back multiple times eventually escapes the app into about:blank
- window.navigation.entries() shows many consecutive same-URL /edit entries
- Forward button enabled after confirm and forward returns to the edit page
- React StrictMode (dev) produces different behavior from production