NextJSのrouteChangeCompleteが正しく動作しない

Question

NextJSのrouteChangeCompleteが意図した挙動をしません
article/[id]でarticle/1→article/2に遷移することを想定します
routeChangeCompleteが発火する場合、urlとrouter.asPathの値が一致していると考えていたのですが、console.logしてみたところ一致していないことが確認できました
ルートの変化が完了する前にrouteChangeCompleteが発火しているようです
この動作が起こったのは、別のブランチでの作業を取り込んだタイミングです
具体的にはNextjsのv10へのアップデートを行なったためそれが原因なのではないかと考えましたが、確証はありません
原因が知りたいです
コードはいかのようになってます

const router = useRouter()
useEffect(()=>{
 const handler = ((url)=>{
  // ここで urlとrouter.asPathが一致するはず　実際にここでconsole.logするとurl:article/2 router.asPath:article/1が出力
 })
 router.events.on(“routeChangeComplete”,handler)
 return router.events.off(“routeChangeComplete”,handler)
},[])

Answer 1

useEffect で return するものは「関数」であり「値」ではありません。この場合

  return router.events.off(“routeChangeComplete”,handler)

の時点で router.events.off(“routeChangeComplete”,handler) が実行されてしまっています。ですので

  return (() => router.events.off(“routeChangeComplete”,handler))

に直してみてください。

Comments

[Yams]

そこはタイポです　実際のコードではおっしゃる通りのコードになってます　それでも上記のような問題が発生します　これはおかしいと思うのですが、それについてはどう思いますか？

[A_kirisaki]

タイポは勘弁してくださいよぉ〜。調べたところ近い内容で未クローズの issue を発見しました。挙動が怪しいようです。
https://github.com/vercel/next.js/issues/15082