【Next.js】NextRouter was not mountedとエラーが出て、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;