Next.js 13 の環境にて、appディレクトリでuseRouterを使用すると、エラーが発生する場合の解決方法を記載しています。
ぜひ、参考にしていただければと思います。
Next.js は不具合があっても、修正が早い!
概要
Next.js 13 の環境にて、appディレクトリでuseRouterを使用すると、下記のエラーが表示される。
1 2 |
Unhandled Runtime Error Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted |
解決方法
appディレクトリではnext/routerではなくnext/navigationからuseRouterをimportすることで、エラーが解消されます。
また、URLクエリパラメータを取得するにはuseRouterではなくuseSearchParamsをimportする必要があります。