タブ閉じる時の確認ダイアログ

import { useEffect } from 'react';

const MyPage = () => {
  useEffect(() => {
    const handleBeforeUnload = (event) => {
      const message = 'このページを離れますか？ 変更が保存されない可能性があります。';
      event.returnValue = message; // 標準に従うブラウザのため
      return message; // 一部の古いブラウザのため
    };

window.addEventListener('beforeunload', handleBeforeUnload);

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

return (
    <div>
      <h1>My Next.js Page</h1>
      <p>ページの内容...</p>
    </div>
  );
};

export default MyPage;