Next.jsでページ遷移時のコールバックイベントを設定する 📖

nextjs.org

github.com

すべては上記のドキュメントとサンプル通りなのですが、useRouterとrouter.eventsを使えば、ページ遷移時にコールバックイベントを設定することができます。

import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    router.events.on('routeChangeComplete', handleChangeRoute);

    return () => {
      router.events.off('routeChangeComplete', handleChangeRoute)
    }
  }, []);

  function handleChangeRoute (path) {
    console.log('complete');
  }

  return <dev />
}

このように実装すると、ページ遷移が完了した時点で、コンソールに 'complete' と表示されます。便利です。

'routeChangeComplete'の部分には、'routeChangeStart'（遷移開始時のイベント）、'routeChangeError'（遷移失敗時のイベント）も渡すことができ、組み合わせて使えば、画面遷移時にロード演出を挟むことなども可能です。