At most one client-side router

Running react-router-dom inside a Next.js app creates two URL-state systems that fight each other: Next.js's file-based router owns actual page transitions while react-router's BrowserRouter intercepts client-side navigation within its subtree. Back-button behavior becomes unpredictable, useRouter and useNavigate report different current paths, and server-rendered pages hydrate with mismatched route state. Shared links often render the wrong page on cold load.

Remove the third-party router and migrate to the framework's built-in routing. In a Next.js app that means converting every react-router-dom import site.

// Before
import { Link, useNavigate } from 'react-router-dom'

// After
import Link from 'next/link'
import { useRouter } from 'next/navigation'

Move routed components into app/ directory segments, then npm uninstall react-router-dom react-router. Verify every <a> and programmatic navigation uses Next primitives by checking src/components/ for stragglers.