Next.js 13 | useRouterエラー「Error: NextRouter was not mounted.」の解決方法について

Next.js

Next.js 13 の環境にて、appディレクトリでuseRouterを使用すると、エラーが発生する場合の解決方法を記載しています。

ぜひ、参考にしていただければと思います。

Next.js は不具合があっても、修正が早い!

概要

Next.js 13 の環境にて、appディレクトリでuseRouterを使用すると、下記のエラーが表示される。

解決方法

appディレクトリではnext/routerではなくnext/navigationからuseRouterをimportすることで、エラーが解消されます。
また、URLクエリパラメータを取得するにはuseRouterではなくuseSearchParamsをimportする必要があります。

タイトルとURLをコピーしました