NextJS 如何检测用户何时离开页面？

在Next.js中，为了检测用户何时离开页面，您可以利用浏览器提供的 beforeunload 事件。这个事件会在窗口、标签页或者浏览器即将卸载当前文档时触发。

首先，您需要在您的 Next.js 组件中添加事件监听器，一般会在 useEffect 钩子中进行，以确保代码在组件加载时执行。以下是一个简单的示例代码：

jsx
import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();
      // 在这里，您可以执行一些清理操作或者最后的保存操作
      // 设置 returnValue 以兼容一些老版本浏览器
      event.returnValue = '';
    };

    // 添加事件监听器
    window.addEventListener('beforeunload', handleBeforeUnload);

    // 组件卸载时，移除事件监听器
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return (
    <div>
      <h1>Welcome to my page!</h1>
    </div>
  );
}

export default MyComponent;

在上述代码中，handleBeforeUnload 函数会在用户尝试离开页面时调用。你可以在这个函数中执行一些操作，比如弹出确认对话框，让用户确认是否真的要离开页面。

需要注意的是，现代浏览器对于 beforeunload 事件中的弹出窗口有一些限制，以避免滥用导致的用户不便。因此，如果你尝试在此事件中使用 alert() 或 confirm() 弹窗，可能不会按预期工作。

此外，这种方法主要用于捕捉用户关闭标签页或浏览器的行为，如果用户通过点击链接离开当前页面，您可能需要另外处理，比如在路由切换时进行检测。

在 Next.js 中，您还可以利用其路由功能（例如 next/router）来检测路由变化，从而进一步掌控用户何时离开页面的行为。例如：

jsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log('App is changing to:', url);
    };

    router.events.on('routeChangeStart', handleRouteChange);

    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
    };
  }, [router]);

  return (
    <div>
      <h1>Welcome to my page!</h1>
    </div>
  );
}

export default MyComponent;

在这段代码中，我们监听了路由变化的开始，这可以帮助我们检测用户何时通过 Next.js 的 Link 组件或编程式导航离开当前页面。