[Next.js] URLが変わった時に検知する方法(クライアントコンポーネント)

Next.jsのクライアントコンポーネントでURLが変わった時に検知する方法についてのメモです。初心者のメモなので参考程度にしてください。

ソースコード

"use client"

import React, { useEffect, useRef, useState } from "react"
import { usePathname } from "next/navigation"

export const MyComponent = () => {
    const pathname = usePathname()
    const pathnameRef = useRef<string>("")

    useEffect(() => {
        console.log("pathname", pathname)
        if (pathnameRef.current !== "" &&
            pathname !== pathnameRef.current) {
            console.log("URLが変わりました。")
        }
        pathnameRef.current = pathname
    }, [pathname])

    // ...
}

この方法で、ハンバーガーメニューの中のリンクをクリックした時に、ハンバーガーメニューを閉じています（ハンバーガーメニューの中身は子コンポーネントのサーバーコンポーネントなのでonClickを使えない）。もっと良い方法があるかもしれませんが、とりあえずこれで凌いでいます。