{"record":{"id":"9cc90ef8214d2ba1","repo":"vercel/next.js","slug":"nextrouter-was-not-mounted-https-nextjs-org-doc","errorCode":null,"errorMessage":"NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted","messagePattern":"NextRouter was not mounted\\. https://nextjs\\.org/docs/messages/next-router-not-mounted","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/next/src/client/router.ts","lineNumber":141,"sourceCode":"  })\n})\n\n// Export the singletonRouter and this is the public API.\nexport default singletonRouter as SingletonRouter\n\n// Reexport the withRouter HOC\nexport { default as withRouter } from './with-router'\n\n/**\n * This hook gives access the [router object](https://nextjs.org/docs/pages/api-reference/functions/use-router#router-object)\n * inside the [Pages Router](https://nextjs.org/docs/pages/building-your-application).\n *\n * Read more: [Next.js Docs: `useRouter`](https://nextjs.org/docs/pages/api-reference/functions/use-router)\n */\nexport function useRouter(): NextRouter {\n  const router = React.useContext(RouterContext)\n  if (!router) {\n    throw new Error(\n      'NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted'\n    )\n  }\n\n  return router\n}\n\n/**\n * Create a router and assign it as the singleton instance.\n * This is used in client side when we are initializing the app.\n * This should **not** be used inside the server.\n * @internal\n */\nexport function createRouter(\n  ...args: ConstructorParameters<typeof Router>\n): Router {\n  singletonRouter.router = new Router(...args)\n  singletonRouter.readyCallbacks.forEach((cb) => cb())","sourceCodeStart":123,"sourceCodeEnd":159,"githubUrl":"https://github.com/vercel/next.js/blob/0ae8c72462952df163f1b1e0726641bc5b40dc93/packages/next/src/client/router.ts#L123-L159","documentation":"`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`.","triggerScenarios":"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).","commonSituations":"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.","solutions":["In tests, wrap the component in a mock `RouterContext.Provider` or use `next/router`'s testing utilities.","Ensure the component is rendered within the Pages Router page tree (`_app`/pages) where the provider is mounted.","In the App Router, import `useRouter` from `next/navigation` instead of `next/router`."],"exampleFix":"// before — test renders component without router context\nrender(<MyComponent />) // throws: NextRouter was not mounted\n\n// after — provide a mock router\nimport { RouterContext } from 'next/dist/shared/lib/router-context'\nconst mockRouter = { push: jest.fn(), pathname: '/' }\nrender(\n  <RouterContext.Provider value={mockRouter}>\n    <MyComponent />\n  </RouterContext.Provider>\n)","handlingStrategy":"validation","validationCode":"// In tests, always wrap with a Router provider.\n// Verify provider presence before rendering:\nfunction hasRouterContext(node: React.ReactElement): boolean {\n  // Heuristic: tests should explicitly provide RouterContext\n  return true // ensure you wrap manually\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Wrap tested components in a RouterContext.Provider with a mock router.","Use the App Router next/navigation useRouter in App Router code to avoid the Pages Router provider requirement.","Avoid rendering Pages Router components in portals outside the _app tree."],"tags":["pages-router","react-context","testing","app-router"],"analyzedSha":"0ae8c72462952df163f1b1e0726641bc5b40dc93","analyzedAt":"2026-08-06T19:44:29.143Z","schemaVersion":2},"datasetVersion":"2026-08-07T02:17:10.218Z"}