【Next.js】ページ離脱時に確認ポップアップを表示してみる

Next.jsでページ離脱時に下のようなポップアップを出してみます。

1 ターゲット
2 コード

ターゲット

ターゲットとするページ離脱は下記。

ブラウザバック
リロード
URL直打ちによる遷移
ブックマークしているURLへの遷移
タブ閉じ
ウィンドウ閉じ

コード

"use client";

import { useEffect } from "react";

export default function Page() {
    useEffect(() => {
        // イベント登録関数
        const register = () => {
            // ページ離脱時のイベント登録関数
            const handleBeforeUnload = (e: BeforeUnloadEvent) => {
                e.preventDefault();
                e.returnValue = "";
            };

            // イベント登録
            window.addEventListener("beforeunload", handleBeforeUnload);
        };

        // イベント登録
        register();

        // これがないと2回目以降のアクセス時、ブラウザバックでポップアップが出ない
        window.addEventListener("pageshow", register);

        // イベント登録解除
        return () => {
            window.onbeforeunload = null;
        };
    }, []);

    return <div>離脱してみよう</div>;
}

"use client";

import { useEffect } from "react";

export default function Page() {
    useEffect(() => {
        // イベント登録関数
        const register = () => {
            // ページ離脱時のイベント登録関数
            const handleBeforeUnload = (e: BeforeUnloadEvent) => {
                e.preventDefault();
                e.returnValue = "";
            };

            // イベント登録
            window.addEventListener("beforeunload", handleBeforeUnload);
        };

        // イベント登録
        register();

        // これがないと2回目以降のアクセス時、ブラウザバックでポップアップが出ない
        window.addEventListener("pageshow", register);

        // イベント登録解除
        return () => {
            window.onbeforeunload = null;
        };
    }, []);

    return <div>離脱してみよう</div>;
}