Next13でのuseRouterのインポートでエラーがでる

はじめに

こんにちは、HappyManaです。
Next.js13でWebアプリを開発しているときに、詰まったことを備忘録として書きます。
フロントエンドはまだ入門したばかりなのでだいぶ初心者です。

useRouterのインポートでエラーがでる

useRouterをインポートして使ったところ以下のエラーが出ました。

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

このURLに遷移すると、Next.js公式のページに飛びます。書かれている文章を日本語訳すると、以下が書かれています。

　コンポーネントがNext.jsアプリケーションの外部でuseRouterを使用した、またはNext.jsアプリケーションの外部でレンダリングされた。
この現象は、useRouterフックを使用するコンポーネントの単体テストを行う際に、Next.jsのコンテキストが設定されていないために発生する可能性があります。
　また、アプリルータのnext/navigationからのuseRouterは、ページ内のuseRouterフックとは動作が異なるため、アプリディレクトリ内のnext/routerからuseRouterフックを使おうとしたときにも発生します。

つまり、useRouterのインポート元をnext/routerではなくnext/navigationにする必要があるようです。

next/routerのuseRouterでは、pathnameやqueryなどを取得できます。

しかし、next/navigationのuseRouterではこれらを取得することはできず、pathnameはnext/navigationのusePathname、queryはnext/navigationのuseSearchParamsを使って取得するようです。

解決策

そのため、import文を以下のように変更します。

// ×
import { useRouter } from 'next/router'

// ◯
import { useRouter } from 'next/navigation'

おわりに

調べていると、App RouterのことなのかPages Routerのことなのかわからないことが多かったので、公式のドキュメントを見ることが大事だとわかりました。
また、公式のドキュメントでも「Using Pages Router」の方でPages Routerの説明をしているページを間違ってみてたこともあったので気をつけたいです。