---
title: How to detect when user leaves the page and display a confirmation dialog?
description: Learn how to use React and Next.js to show an alert asking the user to confirm they want to exit a page using the window beforeunload event listener.
url: "https://vercel.com/kb/guide/leave-page-confirmation-dialog-before-unload-nextjs-react"
published: 2025-11-03
last_updated: 2025-11-10
authors: Lee Robinson
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

When handling a data mutation on your page, it can be beneficial to prevent the user from leaving or closing the page until the action has fully completed.

This guide will show an example of this pattern using React and Next.js.

## Confirm navigation away with event listener

The browser provides an event listener you can use to handle the user attempting to close the window or tab called [`beforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event). We can add a global event listener for this event and use our React state to derive whether it should ask for confirmation or not.

```jsx
// This could be useState, useOptimistic, or other state
let pending = false;

useEffect(() => {
  if (!pending) return;

  function beforeUnload(e: BeforeUnloadEvent) {
    e.preventDefault();
  }

  window.addEventListener('beforeunload', beforeUnload);

  return () => {
    window.removeEventListener('beforeunload', beforeUnload);
  };
}, [pending]);
```

## More Next.js guides

- [Sitemap lastmod should track content, not deployments](/kb/guide/correct-lastmod-nextjs-sitemap): Set accurate sitemap lastmod dates in Next.js using stored content timestamps, targeted revalidation, and checks that distinguish content changes from builds.
- [Optimize CSS output after moving Next.js from webpack to Turbopack](/kb/guide/optimize-turbopack-css): Diagnose larger CSS after moving Next.js to Turbopack. Use the agent skill to compare route-level output, identify causes, and test targeted fixes.
- [Migrate self-hosted Next.js and containers from AWS to Vercel](/kb/guide/migrate-containers-from-aws-to-vercel): Migrate Next.js apps and HTTP containers from AWS to Vercel. Configure AWS access, assess background workers, and plan testing, DNS cutover, and rollback.