You have a Server Component that imports next/router. Use next/navigation instead Next.js Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Next.js: You have a Server Component that imports next/router. Use next/navigation instead

next/router (Pages Router) was imported in an App Router component.

Exact message you may see You have a Server Component that imports next/router. Use next/navigation insteadError: NextRouter was not mounted. next/router App RouterYou are importing next/router in the app directorynext/router in the app dir use next/navigation instead
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

In the App Router use useRouter, usePathname, useSearchParams from next/navigation inside Client Components ("use client"). router.query and events don't exist; read useParams()/useSearchParams(). In Server Components use redirect()/params.

Common causes

  • import { useRouter } from "next/router" in app/
  • Copied Pages Router code
  • Third-party component using next/router in App Router
  • Using router.query
  • Router events like routeChangeStart

⚡ Quick fix

  1. import { useRouter } from "next/navigation"
  2. Add "use client" for hooks
  3. Replace router.query with useParams()/useSearchParams()

Detailed fix by platform

Next.js

  1. "use client"; import { useRouter, usePathname } from "next/navigation";

How to diagnose

  1. Import — next/router in app/?
  2. Directive — use client?
  3. API — query replaced?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

createContext only works in Client Components — Next.js: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client" (Next.js)createContext only wo…Failed prop type: The prop href expects a string or object in <Link> — Next.js: Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead (Next.js)Failed prop type: The…Invalid <Link> with <a> child. Please remove <a> — Next.js 13+: Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior> (Next.js)Invalid <Link> with <…NavigationDuplicated: Avoided redundant navigation to current location — Vue Router: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home" (Vue)NavigationDuplicated:…needs useState — You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client" (React)needs useStatenext build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…NextRouter was not mounted — Error: NextRouter was not mounted. (React)NextRouter was not mo…No HTTP methods exported in route.ts — Next.js: Error: No HTTP methods exported in '/app/api/users/route.ts'. Export a named export for each HTTP method (GET, POST...) (Next.js)No HTTP methods expor…You have …

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.