【Next.js】NextRouter was not mountedとエラーが出て、router.push(“/”)が使えない

はじめに

router.push("/")等で、画面遷移を実装しようとした時、

Unhandled Runtime Error
Error: NextRouter was not mounted.

とエラーが出てしまいます。

環境

• next: 14.0.3

解決

Next.js ver13からuseRouterのパッケージが変更されたことが原因。

これまでは、
import { useRouter } from 'next/router'
を使用していましたが、v13より、
import { useRouter } from 'next/navigation';
となりました。

他の記述は、これまで通りです。

import { useRouter } from 'next/navigation';
const App= () => {
  const router = useRouter();
  const click = () => {
    router.push("/")
  }
  return (
    <></>
  )
}
export default App;

おわりに

忘れるとnext/routerを使っています。
きちんと公式のリファレンスを参照しないと、
調べてもChatGPTを使用してもV13以前のことが多く、まともな正解には辿り着きません。

参照文献

https://nextjs.org/docs/app/api-reference/functions/use-pathname
https://stackoverflow.com/questions/74421327/nextrouter-was-not-mounted-next-js