Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add appDir-specific guidance for next-router-not-mounted error #50076

Merged
merged 8 commits into from
Jun 8, 2023
6 changes: 6 additions & 0 deletions errors/next-router-not-mounted.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,16 @@

A component used `useRouter` outside a Next.js application, or was rendered outside a Next.js application. This can happen when doing unit testing on components that use the `useRouter` hook as they are not configured with Next.js' contexts.

This can also happen when you try to use the `useRouter` hook from `next/router` inside the `app` directory, as the App Router's `useRouter` from `next/navigation` has different behavior to the `useRouter` hook in `pages`.

#### Possible Ways to Fix It

If used in a test, mock out the router by mocking the `next/router`'s `useRouter()` hook.

If used in the `app` directory, migrate to the new hooks imported from `next/navigation`.

### Useful Links

- [next-router-mock](https://www.npmjs.com/package/next-router-mock)
- [App Router Migration](https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks)
- [useRouter](https://nextjs.org/docs/app/api-reference/functions/use-router)