Next.js+TypeScript リロード(再読み込み)時は処理を行わない

#背景
2つのWebページ(ページA, ページB)がある。
ページAにて「router.push」をして、ページBへ遷移する。
遷移してきたページBではとある関数処理が実行される。そして、その関数処理の終了後にF5キー押下などによるリロード(再読み込み)を実行すると、再び関数処理が実行される。しかし今回リロード時に再び関数処理を実行したくないという場面に出会(でくわ)した。
苦戦したのでまとめておくことにした。

#開発言語 (バージョン情報)
React.js (17.0.2)
Next.js (11.1.2)
TypeScript (4.4.3)

#結論
Next.jsのnext/router
「router.events.on('routerChangeComplete', 関数名)」
を使用する

これを使用することで、リンククリックやボタン押下などによる「遷移先アドレスが変わる」ページ遷移のときに関数を発火させることができる。逆にリロードのような「遷移先アドレスが変わらない」ページ遷移のときは関数が発火しないことになる。

#実装例

• 以下のsample.tsxは上記でいうページB(遷移先のページ)にあたる
• 今回はリロードを含めないページ遷移時にダイアログを表示する例を挙げてみた

sample.tsx

import FC, { useState, useEffect } from 'react';
import { useRouter ) from 'next/router';

const PageB: FC = () => {
  const router = useRouter();
  const [dialogOpen, setDialogOpen] = useState(false);

  useEffect(() => {
    // リロードを含めないページ遷移時に行なう関数を定義
    const handleRouteChange = () => {
      if (jobId !== undefined && jobId !== '') {
        setDialogOpen(true);
      }
    }

    // ここがポイント
    router.events.on('routerChangeComplete', handleRouteChange);

    return() => {
      router.events.on('routerChangeComplete', handleRouteChange);
    }
  }, [jobId, router.events]);

  return (
    <>
      {/* ダイアログ（propsのopenにTrueを渡すとダイアログが表示される） */}
      <DetailDialog
        open={dialogOpen}
        setOpen={{setDialogOpen}
        jobId={jobId}
      />
    </>
  );
};

expoer default PageB;

#参考