アプリケーション開発をしていると、編集途中などでブラウザバックやタブを閉じる、リロードのタイミングで確認のアラートを出すケースがあると思います。
今回はNext.jsでそれを実現するための方法を解説します。
バージョン
- React v18.2.0
react-useをインストール
便利なhooksが使えるライブラリのreact-useのuseBeforeUnloadというフックを利用するので、react-useをインストールします。
$ yarn add react-use
// npm
$ npm i react-useカスタムフックを作成
アプリケーション内の複数のページで利用できるようにカスタムフックを作成します。
import { useEffect } from 'react';
import Router from 'next/router';
import { useBeforeUnload } from 'react-use';
export const useLeavePageConfirmation = (
showAlert = true,
message = '入力した内容がキャンセルされますがよろしいでしょうか？',
) => {
useBeforeUnload(showAlert, message);
useEffect(() => {
const handler = () => {
if (showAlert && !window.confirm(message)) {
throw 'キャンセル';
}
};
Router.events.on('routeChangeStart', handler);
return () => {
Router.events.off('routeChangeStart', handler);
};
}, [showAlert, message]);
};
routeChangeStartは、ルートが変更されると発火されるイベントです。
適用したいページでフックを呼ぶ
次に適用したいページで、先ほど作成したカスタムフックを呼びます。
const SampleComp = () => {
const [showLeavingAlert, setShowLeavingAlert] = useState(true);
useLeavePageConfirmation(showLeavingAlert); // NOTE: メッセージを変更したい場合は、第二引数に文字列を渡す。
// 以下諸々の処理
...
};showLeavingAlertをfalseにしてあげればアラートは表示されないので、アプリケーションの仕様に合わせて変更してください。
まとめ
Next.jsで、編集途中などでブラウザバックやタブを閉じる、リロードのタイミングで確認のアラートを出す方法について解説しました。
やり方は複数ありますが、シンプルで使いやすいと思いますので参考になれば使ってみてください。
