Next.jsでブラウザバック、タブを閉じる、リロードの前に確認画面(アラート)を表示する方法を解説

アプリケーション開発をしていると、編集途中などでブラウザバックやタブを閉じる、リロードのタイミングで確認のアラートを出すケースがあると思います。

今回はNext.jsでそれを実現するための方法を解説します。

バージョン

React v18.2.0

react-useをインストール
カスタムフックを作成
適用したいページでフックを呼ぶ
まとめ

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にしてあげればアラートは表示されないので、アプリケーションの仕様に合わせて変更してください。