Error Fixes

How to Fix ‘NextRouter Was Not Mounted’ Error in Next.js

by

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:

Plaintext
Error: NextRouter was not mounted.
https://nextjs.org/docs/messages/next-router-not-mounted

This 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:

TypeScript
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:

Elon Musk
4.7 out of 5 stars(19028)
$22.96 (as of January 21, 2025 11:31 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Start with Why: How Great Leaders Inspire Everyone to Take Action
4.6 out of 5 stars(38300)
$10.49 (as of January 21, 2025 11:31 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Python Crash Course, 3rd Edition: A Hands-On, Project-Based Introduction to Programming
4.8 out of 5 stars(1402)
$28.99 (as of January 21, 2025 11:31 GMT +00:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

  1. Incorrect useRouter Import in the App Directory:
    In Next.js 14 and above, the app directory uses a new routing system, and the useRouter hook should be imported from next/navigation, not next/router. The hook from next/router is designed for the pages directory, and its behavior is different, leading to the router not being mounted in app directory components.
  2. Trying to Use useRouter Too Early:
    If you’re trying to use useRouter before the component has mounted (such as in server-side components), the error will occur because the router is only available on the client-side.
  3. Server-Side Components Using Client-Side Features:
    This error can also happen if you attempt to use useRouter in a server-side component. Since routing is inherently client-side in React, useRouter needs 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:

TypeScript
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:

TypeScript
"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.

Share this:

Related Posts:

ErrorsNextjs

Leave a Reply