You use Next.js, and you want to show "You have unsaved changes that will be lost." dialog when user leaves page? This library is just for you!
npm install next-navigation-guard
# or
yarn install next-navigation-guard
# or
pnpm install next-navigation-guard-
App Router: app/layout.tsx
<html lang="en"> <body className={`${geistSans.variable} ${geistMono.variable}`}> <NavigationGuardProvider>{children}</NavigationGuardProvider> </body> </html>
-
Page Router: page/_app.tsx
export default function MyApp({ Component, pageProps }: AppProps) { return ( <NavigationGuardProvider> <Component {...pageProps} /> </NavigationGuardProvider> ); }
-
window.confirm()
useNavigationGuard({ enabled: form.changed, confirm: () => window.confirm("You have unsaved changes that will be lost.") })
-
Custom dialog component
const navGuard = useNavigationGuard({ enabled: form.changed }) return ( <> <YourContent /> <Dialog open={navGuard.active}> <DialogText>You have unsaved changes that will be lost.</DialogText> <DialogActions> <DialogButton onClick={navGuard.reject}>Cancel</DialogButton> <DialogButton onClick={navGuard.accept}>Discard</DialogButton> </DialogActions> </Dialog> </> )
See working example in example/ directory and its NavigationGuardToggle component.