---
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]);
```

## Related Documentation

- [Next.js](/docs/frameworks/full-stack/nextjs)

## More Next.js guides

- [Build an AI Chat Agent with Weather API Tool Calling](/kb/guide/build-ai-agent-weather-api): Build an intelligent conversational agent that fetches real-time weather data using the AI SDK, tool calling, and a backend weather API powered by Express, FastAPI or Nitro
- [Human-in-the-Loop with Chat SDK and Workflow SDK](/kb/guide/human-in-the-loop-with-chat-sdk-and-workflow-sdk): Combine Chat SDK and Workflow SDK to suspend workflows on approval cards in a chat platform, then resume on click via createWebhook.
- [Build with Vercel Blob on Next.js](/kb/guide/vercel-blob-nextjs): Deploy the Vercel Blob Next.js Starter and learn how client uploads store images securely in a private Blob store.

## Reference Architecture

Choose a stack and work through the decisions behind it, with curated documentation, guides, templates, and courses to help you build.

- [Agent stack](/kb/architecture/agents): Build and operate agents with models, tools, and durable workflows.
- [Web applications](/kb/architecture/web): Choose rendering, data, authentication, and caching approaches.
- [Backends](/kb/architecture/backends): Choose a runtime, connect services, and run background work.

[Browse all stacks](/kb/architecture)

## Build with prompts

Build an app, extend an agent, or improve your project with ready-to-use prompts for your coding agent.

[Browse the prompt library](/kb/prompts) · [Read the Markdown index](/kb/prompts.md)