Error: NextRouter was not mounted.

Next.js · updated 2026-11-03

Thrown when useRouter() from next/router runs in a component rendered by the App Router (the app directory). The pages router context it needs is not mounted there, so the hook fails as soon as the component renders.

 ⨯ Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (node_modules/next/dist/client/router.js:146:15)
    at Header (./src/components/Header.tsx:9:30)

Quick fix

In the app directory, import useRouter, usePathname and useSearchParams from 'next/navigation' instead of 'next/router'. The new router has no pathname, query or events on the router object: read them with usePathname() and useSearchParams().

1. Replace import { useRouter } from 'next/router' with import { useRouter } from 'next/navigation'.
2. Swap router.pathname for usePathname() and router.query for useSearchParams() (or the page params prop).
3. Mark the component 'use client'; these hooks only run in Client Components.
4. For router.events (route change tracking), use a usePathname/useSearchParams effect instead.
5. Shared components used by both pages/ and app/ need to pick one router or receive the values as props.

'use client';
import { useRouter, usePathname, useSearchParams } from 'next/navigation';

export function Header() {
  const router = useRouter();          // push, replace, back, refresh
  const pathname = usePathname();      // was router.pathname
  const params = useSearchParams();    // was router.query
  return <button onClick={() => router.push('/orders')}>{pathname} {params.get('tab')}</button>;
}

Why it happens

Other fixes

• Search the codebase for "next/router" imports under app/ and components it renders.
• In tests, mock next/navigation for components that moved to the App Router.

Same error, other wording

• Error: invariant expected app router to be mounted
• Error: useRouter only works in Client Components. Add the "use client" directive at the top of the file to use it.

Related errors

• ReferenceError: window is not defined
• Error: Event handlers cannot be passed to Client Component props.
• Hydration failed because the server rendered HTML didn't match the client. As a result...

References: Next.js docs: NextRouter was not mounted, Next.js docs: useRouter (next/navigation)