What is the difference between next/router and next/navigation?

Question

In Next.js, I know that both next/router and next/navigation have a useRouter() hook, but the objects returned are different. Why does Next.js have the same hook on both routing packages?

Answer 1

useRouter from next/router will be used in the pages folder, in Next.js Set the initial way of routing. Starting with v13 they introduced a new directory called app (used when you say yes to the last question shown in the image below ), built on Server Component where you can define routes differently and use useRouter from next/navigation: Quoted from

doc

: As shown in the picture on the left, you can select the router type for which you want to obtain relevant documents: