Next.jsのDynamic Routesの変更を検知する

超短備忘録です。

pages/hoge/[...path].tsx みたいなものを作ると hoge から始まるRouteはすべてここにマッチするわけで、例えば /hoge/aaa から /hoge/bbb に遷移するとき、何も考えずに useEffect しても発火しません。

かといって、以下のようにすると無限ループになります。

const router = useRouter()
const [...path] = router.query.path as string[] | undefined ?? []

useEffect(() => {
  console.log('hello~~')
}, [path])

正解はこっち。

const router = useRouter()

useEffect(() => {
  console.log('hello~~')
}, [router])

思うより router は賢かった。