# Error: NextRouter was not mounted

> You may encounter this error when using the useRouter hook in Next.js 13 or later. Learn how to debug and resolve this issue.

**URL:** https://sentry.io/answers/error-nextrouter-was-not-mounted/

---

## The Problem

When using the `useRouter` hook in Next.js 13 or later, you may encounter the following error:

```
Error: NextRouter was not mounted
```

This error can occur in one of two ways:

1. When a component uses the `useRouter` hook outside of a Next.js application, or when a router is rendered outside of a Next.js application - like during unit testing.
2. When trying to use the `useRouter` hook from the `next/router` package when using the App Directory. This is because the App Router (from `next/navigation`) has a different behavior from the `useRouter` hook used in `pages`.

## The Solution

Ensure you are using the correct `useRouter` hook. If you are using the App Directory, check that the `useRouter` hook is imported from `next/navigation` and not from `next/router`.

When using the `useRouter` hook from `next/navigation`, use the following guidelines:

- Instead of `pathname`, use the `usePathname()` hook.
- Instead of the `query` object, use the `useSearchParams()` hook.

### Mock `next/navigation` When Writing Unit Tests

The above error can also occur when using the `useRouter` hook from `next/navigation` in unit tests. Use the [`next-router-mock` package](https://www.npmjs.com/package/next-router-mock), which has built-in support for `next/navigation`:

```js
jest.mock('next/navigation', () => require('next-router-mock/navigation'));
```

This provides mocks for `useRouter`, `usePathname`, `useSearchParams`, and `useParams`. You can set the URL in your tests by calling `mockRouter.push()` or `mockRouter.setCurrentUrl()` from `next-router-mock`.

---

*Source: [sentry.io/answers/error-nextrouter-was-not-mounted/](https://sentry.io/answers/error-nextrouter-was-not-mounted/)*