nextjs migration_error ai_generated true

Error: NextRouter was not mounted

ID: nextjs/next-router-app-dir

Also available as: JSON · Markdown
95%Fix Rate
95%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

Using next/router in App Router. App Router uses next/navigation instead.

generic

Workarounds

  1. 95% success Replace next/router with next/navigation 
    // Old: import { useRouter } from 'next/router'
// New: import { useRouter } from 'next/navigation'

    Sources: https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks

  2. 92% success Replace router.query with useSearchParams() and useParams() 
    import { useSearchParams, useParams } from 'next/navigation';

    Sources: https://nextjs.org/docs/app/api-reference/functions/use-search-params

Dead Ends

Common approaches that don't work:

  1. Wrap with RouterContext.Provider 85% fail

    Hack that doesn't work — App Router has a different router

  2. Move the file to pages/ directory 60% fail

    Defeats the purpose of migrating to App Router

Error Chain

Frequently confused with: