Having trouble with NextJs use Router in react js

The issue is occurring because you're using a react hook on the top level. Instead of this, you should be using the hook inside your React Functional component.

Something like this:

import { useRouter } from 'next/router'

function ActiveLink({ href }) {
  const router = useRouter()

  return (
    <a href={href}>
      This will redirect
    </a>
  )
}

export default ActiveLink