Next js router and useRouter

Question

import { router } from "next/client";
import { useRouter } from "next/router";

const CustomComponent = () => {
  const routerFromHook = useRouter();
}

export default CustomComponent;

What is difference between router object and routerFromHook object? Which is better?

Answer 1

First line of this documentation https://nextjs.org/docs/pages/api-reference/functions/use-router says that the useRouter is to be used inside a functional component when the router object is needed.