Next 13 app router でuseRouterを使用するとエラーが表示される

概要

タイトル通り。Next 13 appディレクトリでuseRouterを使用すると以下エラーが表示される。

Error: NextRouter was not mounted.

原因

公式に書いてあった。appディレクトリではnext/routerではなくnext/navigationからuseRouterをimportする必要がある。
また、URLクエリパラメータを取得するにはuseRouterではなくuseSearchParamsをimportする必要があるらしい。
https://github.com/vercel/next.js/issues/41811
https://beta.nextjs.org/docs/upgrade-guide#step-4-migrating-routing-hooks

まとめ

困ったら公式ドキュメントかissueを見れば大抵どうにかなる