Why does useRouter from next/router throw an error in Next.js 13+ app directory?

[javascripter101]

Summary

I was following a tutorial and it told me to import useRouter from next/router but I'm getting this error:
Error: invariant expected app router to be mounted
I'm using the app directory. What am I doing wrong?

Additional information

No response

Example

No response

[MILLERMARRU]

next/router's useRouter is the Pages Router hook, it expects the Pages Router's context to be mounted (the one _app.js sets up), which doesn't exist when you're inside the app/ directory. That's the root of the confusion, the tutorial you followed was written for the Pages Router.

For the App Router, import from next/navigation instead:

'use client'
import { useRouter } from 'next/navigation'

export default function Component() {
  const router = useRouter()
  // router.push(), router.replace(), router.back(), router.refresh(), router.prefetch()
}

Two things worth knowing since the API isn't identical to the Pages Router version: next/navigation's useRouter doesn't return query or isReady, for route params use the useParams() hook and for search params use useSearchParams(), both also from next/navigation. And it only works in Client Components ('use client' at the top), in a Server Component you read params/searchParams directly from the function's props instead of calling a hook.

If you ever need one component that works in both app/ and pages/ during a migration, there's next/compat/router, its useRouter returns null instead of throwing when the Pages Router isn't mounted, so you can branch on that instead of crashing, but for a component that's purely in app/, next/navigation is the one you want.

[navpreet-dev]

Your tutorial was written for the Pages Router (pages/ folder). You're using the App Router (app/ folder), and it has its own hooks in next/navigation. next/router only works under pages/, which is why you get the "app router to be mounted" invariant error.

Fix: change the import and mark the file as a Client Component:

'use client'

import { useRouter, usePathname, useSearchParams, useParams } from 'next/navigation'

export default function MyButton() {
  const router = useRouter()
  return <button onClick={() => router.push('/dashboard')}>Go</button>
}

Quick mapping from the old API to the new one:

Pages Router (next/router)	App Router (next/navigation)
router.push / replace / back / prefetch	same, on useRouter()
router.pathname	usePathname()
router.query (search params)	useSearchParams()
router.query (dynamic segments like [id])	useParams()
router.events	not available; watch usePathname() / useSearchParams() in a useEffect
router.isReady	not needed

Two common gotchas:

• These hooks only work in Client Components ('use client' at the top). In a Server Component, read params / searchParams from the page props instead (await params in Next.js 15+), and use redirect() from next/navigation to navigate.
• For simple links, use <Link href="/dashboard"> instead of router.push. It prefetches and is better for accessibility.

Docs: https://nextjs.org/docs/app/api-reference/functions/use-router#migrating-from-nextrouter