こんにちは、皆さん。今日はNext.jsでURLが変更されたときに特定の関数を発火させる方法について話します。これは、ページ遷移だけでなく、ブラウザバックの際にも発火します。

目次

はじめに
Next.jsとは
URL遷移の検知とは
URL遷移の検知方法
URLの変更判定について
まとめ

はじめに

Next.jsはReactのフレームワークで、サーバーサイドレンダリングや静的サイト生成など、多くの機能を提供しています。本記事では、Next.jsのuseRouterフックとReactのuseEffectフックを組み合わせることで、URLの遷移を検知し、特定の関数を発火させる方法を解説します。

Next.jsとは

Next.jsは、ReactベースのJavaScriptフレームワークで、サーバーサイドレンダリング(SSR)や静的サイト生成(SSG)など、Reactの機能をさらに強化したものです。Next.jsには独自のルーティングシステムがあり、これを利用することでURLの遷移を検知することが可能です。

URL遷移の検知とは

ユーザーがページを移動するとき、URLが変わります。この変化を検知して、特定の関数を発火させることを考えてみましょう。例えば、ユーザーが別のページに移動したときにサイドバーを閉じるなどの処理がこれに該当します。

URL遷移の検知方法

Next.jsのuseRouterフックとReactのuseEffectフックを組み合わせてURLの遷移を検知し、特定の関数を発火させる方法を見てみましょう。

import { useEffect, useRef } from 'react';
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  const previousUrlRef = useRef(router.asPath);

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      if (url !== previousUrlRef.current) {
        // URLが実際に変更された場合のみ処理を行う
        console.log('URLが変わりました:', url);
        // ここに発火させたい関数を書く

        // 現在のURLを保存
        previousUrlRef.current = url;
      }
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    // コンポーネントのアンマウント時にイベントリスナーを削除する
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);

  return <div>Your component here</div>;
};

export default MyComponent;

このコードでは、useEffect内でrouter.events.on('routeChangeComplete', handleRouteChange);を使用してURLの変化をリッスンしています。URLが変わるとhandleRouteChange関数が呼び出され、これによりURLの変化ごとに特定の関数を実行することができます。

URLの変更判定について

このコードにおける useRef と if (url !== previousUrlRef.current) の判定は、URLが実際に変更された場合のみ特定の処理を行うために存在します。

useRef は、previousUrlRef という参照オブジェクトを作成します。このオブジェクトは、その current プロパティによって直前のURL（遷移前のURL）を保持します。

const previousUrlRef = useRef(router.asPath);

次に if (url !== previousUrlRef.current) という条件式は、新たに遷移したURL（url）が直前のURL（previousUrlRef.current）と異なる場合にのみ処理を行うことを保証します。

if (url !== previousUrlRef.current) {
  // URLが実際に変更された場合のみ処理を行う
  console.log('URLが変わりました:', url);
  // ここに発火させたい関数を書く

  // 現在のURLを保存
  previousUrlRef.current = url;
}

これにより、同じURLに対して複数回発火するという状況を避けることができます。また、この判定により、実際にURLが変更されたときだけ特定の処理（この例では console.log とその後の関数呼び出し）を行うことができます。

まとめ

Next.jsのuseRouterフックとReactのuseEffectフックを組み合わせることで、URLの遷移を検知し、特定の関数を発火させることができます。さらに、useRefとURLの変更判定