サイト名変更・お引越しのお知らせ

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

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

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

バージョン
  • React v18.2.0

react-useをインストール

便利なhooksが使えるライブラリのreact-useuseBeforeUnloadというフックを利用するので、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: メッセージを変更したい場合は、第二引数に文字列を渡す。
  
  // 以下諸々の処理
  ...
};

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

まとめ

Next.jsで、編集途中などでブラウザバックやタブを閉じる、リロードのタイミングで確認のアラートを出す方法について解説しました。

やり方は複数ありますが、シンプルで使いやすいと思いますので参考になれば使ってみてください。