Next.js: NextRouter was not mounted

What it means in plain English

Next.js says this error occurs when a component used useRouter outside a Next.js application, or was rendered outside a Next.js application.

It can happen in unit tests of components that use useRouter, because the tests are not configured with Next.js's contexts. It can also happen when you use useRouter from next/router inside the app directory. The App Router's useRouter from next/navigation behaves differently from the useRouter hook in pages.

Likely causes

• A unit test renders a component that calls useRouter.
• A file in the app directory imports useRouter from next/router.
• A component in pages is being moved to app, and the import still points at next/router.

How to fix it, step by step

1. Find which useRouter the component imports.
2. In the app directory, migrate to the hooks imported from next/navigation.

import { useRouter } from 'next/navigation'

3. In a test, mock the useRouter() hook from next/router. Next.js links next-router-mock for this.
4. In the pages directory, while you migrate from pages to app, you can import from next/compat/router instead. Next.js says it is the same useRouter hook but does not throw this error.

How to check it worked

• The page or test renders without NextRouter was not mounted.
• Components in app import router hooks from next/navigation.

Sources

• https://nextjs.org/docs/messages/next-router-not-mounted (opens in a new tab)