【Next.js】NextRouter was not mounted.

こんにちは、フリーランスエンジニアの太田雅昭です。

時々やってしまうこの問題。

useRouterはnext/navigationからimportする

今私が使ってるNextはv14なのですが、その場合useRouterはnext/navigationからimportしないと、エラーになります。

// import { useRouter } from "next/router";
import { useRouter } from "next/navigation";

VSCodeなどのIDEで脳死でimportしていると、このようなことが起きます。あれ？と思ってサーバーを再起動したり色々してから気づくこの問題。忘れないように共有させていただきます。

小話

ポテチは何味が好きですか？やはりコンソメかのり塩です私ははい。