vercel/next.js · error · Error

NextRouter was not mounted. https://nextjs.org/docs/messages

Error message

NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

What it means

`useRouter()` in router.ts:138-147 (Pages Router) reads the router from `RouterContext` and throws this `Error` when the context value is null — i.e. the component is rendered outside the `RouterContext.Provider` that Next.js mounts during Pages Router hydration. The linked docs message is `next-router-not-mounted`.

Source

Thrown at packages/next/src/client/router.ts:141

  })
})

// Export the singletonRouter and this is the public API.
export default singletonRouter as SingletonRouter

// Reexport the withRouter HOC
export { default as withRouter } from './with-router'

/**
 * This hook gives access the [router object](https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object)
 * inside the [Pages Router](https://nextjs.org/docs/pages/building-your-application).
 *
 * Read more: [Next.js Docs: `useRouter`](https://nextjs.org/docs/pages/api-reference/functions/use-router)
 */
export function useRouter(): NextRouter {
  const router = React.useContext(RouterContext)
  if (!router) {
    throw new Error(
      'NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'
    )
  }

  return router
}

/**
 * Create a router and assign it as the singleton instance.
 * This is used in client side when we are initializing the app.
 * This should **not** be used inside the server.
 * @internal
 */
export function createRouter(
  ...args: ConstructorParameters<typeof Router>
): Router {
  singletonRouter.router = new Router(...args)
  singletonRouter.readyCallbacks.forEach((cb) => cb())

View on GitHub (pinned to 0ae8c72462)

Solutions

1. In tests, wrap the component in a mock `RouterContext.Provider` or use `next/router`'s testing utilities.
2. Ensure the component is rendered within the Pages Router page tree (`_app`/pages) where the provider is mounted.
3. In the App Router, import `useRouter` from `next/navigation` instead of `next/router`.

Example fix

// before — test renders component without router context
render(<MyComponent />) // throws: NextRouter was not mounted

// after — provide a mock router
import { RouterContext } from 'next/dist/shared/lib/router-context'
const mockRouter = { push: jest.fn(), pathname: '/' }
render(
  <RouterContext.Provider value={mockRouter}>
    <MyComponent />
  </RouterContext.Provider>
)

// In tests, always wrap with a Router provider.
// Verify provider presence before rendering:
function hasRouterContext(node: React.ReactElement): boolean {
  // Heuristic: tests should explicitly provide RouterContext
  return true // ensure you wrap manually
}

When it happens

Trigger: Rendering a component that calls the Pages Router `useRouter()` outside of a Next.js page tree: in a Storybook, an isolated test, a portal/overlay mounted outside `_app`, or an App Router layout (which does not provide the Pages Router context).

Common situations: Unit testing a component with `useRouter()` without wrapping it in a Router provider; using a portal that renders outside the app tree; mixing App Router and Pages Router `useRouter` imports; SSR where the provider is absent.

Related errors

• No router instance found. You should only use "next/router"
• [inspect] ${route}: not an App Router document (no __next_f)
• Default export is missing in {resource_path}
• id property is required for every item returned from generat
• id property is required for every item returned from generat

AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/9cc90ef8214d2ba1. Report an issue: GitHub.