Introduction
While working with Next.js 14, you may encounter an error that says, “Error: NextRouter was not mounted”. This issue commonly arises when using the useRouter hook, especially in projects using the app directory. This blog post will walk you through the causes of this error and provide a step-by-step solution specific to Next.js 14’s app directory.
Thank me by sharing on Twitter 🙏
Error Description
The full error message looks like this:
Error: NextRouter was not mounted.
https://nextjs.org/docs/messages/next-router-not-mountedThis error can appear when you’re trying to use the useRouter hook inside a component in the app directory. Here’s an example scenario where this error can arise:
import { useRouter } from 'next/router';
const MyComponent = () => {
const router = useRouter();
return <div>{router.pathname}</div>;
};When this component is rendered in the app directory, you get the “NextRouter was not mounted” error.
Cause of the Error
This error occurs because of the differences between how Next.js handles routing in the app directory compared to the traditional pages directory. Specifically, there are a few causes:
- Incorrect
useRouterImport in the App Directory:
In Next.js 14 and above, the app directory uses a new routing system, and theuseRouterhook should be imported fromnext/navigation, notnext/router. The hook fromnext/routeris designed for the pages directory, and its behavior is different, leading to the router not being mounted in app directory components. - Trying to Use
useRouterToo Early:
If you’re trying to useuseRouterbefore the component has mounted (such as in server-side components), the error will occur because the router is only available on the client-side. - Server-Side Components Using Client-Side Features:
This error can also happen if you attempt to useuseRouterin a server-side component. Since routing is inherently client-side in React,useRouterneeds to be used in a client component, meaning you need to declare"use client"at the top of your component file.
Solution
In Next.js 14’s app directory, you should import the useRouter hook from next/navigation instead of next/router. Here’s a step-by-step guide to resolving this error.
Step 1: Ensure You’re Using the App Directory
If you’re working in the app directory, your file structure should reflect this, with routes inside app/. If you’re still using the pages directory, this guide doesn’t apply.
Step 2: Update Your useRouter Hook Import
Replace the useRouter import with the one from next/navigation. Here’s the correct implementation:
import { useRouter } from 'next/navigation'; // Correct import for app directory
const MyComponent = () => {
const router = useRouter();
return <div>{router.pathname}</div>;
};
export default MyComponent;Step 3: Ensure the Component is Client-Side
If you’re using client-side features like useRouter, you need to explicitly declare the component as a client component by adding "use client" at the top:
"use client";
import { useRouter } from 'next/navigation';
const MyComponent = () => {
const router = useRouter();
return <div>{router.pathname}</div>;
};
export default MyComponent;Verification
After applying the fix, your component should render without any issues. The router should now be mounted properly, and you will be able to access routing properties such as pathname or programmatically navigate using router.push().
You can test the component by rendering it in your app and verifying that it no longer throws the “NextRouter was not mounted” error. The component should display the current route’s pathname as expected.
Conclusion
The “NextRouter was not mounted” error is common when transitioning to Next.js 14’s app directory. The root cause is often using the wrong useRouter import (next/router instead of next/navigation). By updating the import and ensuring that your component is declared as client-side, you can resolve the issue quickly.
With Next.js’s evolving architecture, keeping up with changes in the app directory is crucial to avoid similar issues. By following these simple steps, you can ensure your routing functionality works seamlessly in your Next.js 14 projects.
