The useRouter
from next/router
is to be used in the pages
folder, the initial way of setting up routes in Next.js. Since v13
, they introduced a new directory called app
(used when you say Yes to the last question shown in the below image), built on top of Server Components, where you define routes differently and use useRouter
from next/navigation
:
A quote from the doc:
At the top of the sidebar, you’ll notice a dropdown menu that allows you to switch between the App Router the Pages Router features. Since there are features that are unique to each directory, it’s important to keep track of which tab is selected.
As you can see on the left, you can choose the type of router you want to get the relevant doc: