Solving the 'NextRouter Was Not Mounted' Error in Next.js

Heads up!

If you're using Next.js App Router, this error probably happens because you are importing useRouter from next/router instead of next/navigation.
Try this, instead:

This generally resolves the error.

Issue still there?

If you're using Pages Router, keep reading.
If you've been working with Next.js for a while, you may have encountered the 'NextRouter Was Not Mounted' error. This error typically occurs when you try to access the Next.js router object (router) before it has been properly mounted. In this guide, we'll explore the causes of this error and provide several solutions to help you resolve it.

What Causes the 'NextRouter Was Not Mounted' Error?

The 'NextRouter Was Not Mounted' error usually occurs when your application tries to use the router object before it has been fully mounted. This can happen in a variety of scenarios, such as:

• When attempting to access the router object in a Next.js page component's getStaticProps, getServerSideProps, or getInitialProps functions.
• When using the router object in a custom hook that is invoked before the router has been fully initialized.
• When trying to access the router object outside of a Next.js page component, such as in a utility function or an imported module.
  Now that we understand the possible causes, let's delve into the various solutions for resolving this error.

Solution 1: Using Optional Chaining

One way to avoid the 'NextRouter Was Not Mounted' error is by leveraging optional chaining. This allows you to safely access properties of an object even if they are not defined yet. You can use optional chaining to ensure that the router object has been fully mounted before attempting to access its properties. Here's an example of how you can implement optional chaining:

1// Check if the router object exists before accessing its properties
2if (router?.query) {
3  // Access the query parameters
4  const { id, name } = router.query;
5  // Do something with the query parameters
6  console.log(`ID: ${id}
7, Name: ${name}
8`);
9}
10

By using optional chaining (router?.query), you can prevent the error from occurring if the router object is not yet mounted. This approach is especially useful when you need to access the router object in scenarios such as getStaticProps or getServerSideProps.

Solution 2: Wrapping Components with withRouter

If you encounter the 'NextRouter Was Not Mounted' error in a component that is not a Next.js page component, you can use the withRouter higher-order component to wrap the component and ensure that the router object is available. Here's an example of how you can use withRouter:

1import { withRouter } from "next/router";
2// Wrap your component with the `withRouter` higher-order component
3const MyComponent = ({ router }) => {
4  // Access the router object
5  console.log(router);
6  // Render your component
7  // ...
8};
9export default withRouter(MyComponent);
10

By wrapping your component with withRouter from the next/router package, the router object will be passed as a prop to your component, ensuring that it is always available.

Solution 3: Using Next.js Lifecycle Hooks

If you encounter the 'NextRouter Was Not Mounted' error in a Next.js page component, you can use the built-in lifecycle hooks provided by Next.js to ensure that the router object is fully mounted before trying to access it. Here's an example:

1import { useRouter } from "next/router";
2const MyPage = () => {
3  const router = useRouter();
4  // Use the useEffect hook to access the router object after it has been mounted
5  useEffect(() => {
6    // Access the router object
7    console.log(router);
8  }, [router]);
9  // Render your page component
10  // ...
11};
12export default MyPage;
13

In this example, we use the useRouter hook provided by Next.js to access the router object. We then use the useEffect hook to ensure that the router object is available before trying to access it. By including [router] as the dependency array, we ensure that the effect runs whenever the router object changes.

Conclusion

The 'NextRouter Was Not Mounted' error in Next.js can be frustrating, but with the solutions provided in this guide, you should be able to resolve it and ensure smooth routing in your Next.js applications. Remember to properly mount the router object before trying to access it, and consider using optional chaining, the withRouter higher-order component, or the Next.js lifecycle hooks to ensure that the router is fully initialized. Happy coding!