vercel/next.js · error · Error

invariant expected app router to be mounted

Error message

invariant expected app router to be mounted

What it means

Context invariant in the useRouter client hook: useContext(AppRouterContext) returned null, meaning the component calling useRouter is not rendered inside the App Router provider tree. Typical causes are using next/navigation's useRouter in a Pages Router component or mounting outside the app directory tree.

Source

Thrown at packages/next/src/client/components/navigation.ts:169

 * @example
 * ```ts
 * "use client"
 * import { useRouter } from 'next/navigation'
 *
 * export default function Page() {
 *  const router = useRouter()
 *  // ...
 *  router.push('/dashboard') // Navigate to /dashboard
 * }
 * ```
 *
 * Read more: [Next.js Docs: `useRouter`](https://nextjs.org/docs/app/api-reference/functions/use-router)
 */
// Client components API
export function useRouter(): AppRouterInstance {
  const router = useContext(AppRouterContext)
  if (router === null) {
    throw new Error('invariant expected app router to be mounted')
  }

  // Read the bfcacheId of the closest CacheNode and merge it into the
  // returned router instance. This is contextual: callers in a shared
  // layout get the layout's id; callers in a leaf segment get the leaf's.
  // The id is stored on the CacheNode as a number and materialized as a
  // string here. The format mirrors React's `useId()` (e.g. `_r_0_`) with
  // a `b` prefix, so the id can be safely concatenated with other keys
  // without collision.
  const layout = useContext(LayoutRouterContext)
  const bfcacheIdNumber = layout?.parentCacheNode.bfcacheId ?? 0
  return useMemo<AppRouterInstance>(
    () => ({
      back: router.back,
      forward: router.forward,
      refresh: router.refresh,
      hmrRefresh: router.hmrRefresh,
      push: router.push,

View on GitHub (pinned to 0eb3775416)

Solutions

1. Ensure navigation hooks (useRouter etc.) are only used under the app router tree; this invariant failing usually means the hook ran outside a mounted app router — upgrade Next.js or check component placement.

When it happens

Trigger: App router hooks are used before the app router instance is mounted.

Common situations: Calling useRouter/usePathname outside the app router tree or during an unexpected render phase.

AI-assisted analysis of vercel/next.js@0eb3775416 (2026-08-19). Data as JSON: /api/errors/556bcdee2c9c1f2d. Report an issue: GitHub.