useRouter: Programmatic Navigation in Next.js
The useRouter hook gives you a router object to programmatically control navigation. Use it for event-driven redirects, like sending a user to their dashboard after a successful login.
Why it exists
Applications often need to change routes based on logic, not just a user clicking a link. Scenarios like redirecting after a successful API call, completing a form submission, or enforcing authentication require a way to trigger navigation from within your code. The useRouter hook provides this imperative API.
The mental model
Think of the <Link> component as a static signpost telling users where they can go. In contrast, useRouter is like a GPS navigator that can actively reroute you based on real-time events and conditions. It's for when the application decides to navigate, not just the user.
How it works
When you call const router = useRouter() in a Client Component, Next.js provides an object with methods for navigation. The most common is router.push('/dashboard'), which adds a new entry to the browser's history stack and navigates to the new page. Other methods include router.replace() (navigates without adding to history), router.back() (goes to the previous page), and router.refresh() (re-fetches data for the current route).
When to use it
Use useRouter for navigation triggered by functions or event handlers. A classic example is a login form: upon successful authentication, you call router.push('/profile') inside your submit handler. It's also ideal for multi-step wizards or redirecting users away from protected pages if they aren't authenticated.
When not to use it
For standard, static navigation where a user clicks a visible link, always prefer the <Link> component. <Link> is more accessible, crawlable by search engines, and handles performance optimizations like prefetching automatically. Using useRouter with an onClick on a generic is an anti-pattern that recreates a link with worse performance and accessibility.
One canonical example
A login component that redirects on success. Inside its form submission handler, after successfully validating the user's credentials with an API, you would call router.push('/dashboard'). This programmatically sends the user to their main application page, happening within a function rather than as a direct result of clicking a static link.
Interview question
Which scenario best illustrates the primary use case for Next.js's useRouter hook over the Link component?
- a.Automatically redirecting a user to a dashboard page after their form submission is successfully processed by an API.Correct
- b.Displaying a list of navigation links in a header that users can click to visit different sections.
- c.Implementing a "Go Back" button that navigates to the previously viewed page in the browser history.
- d.Creating a button that, when clicked, takes the user to a specific external website.
Why? this is the answer
The useRouter hook is designed for programmatic navigation, such as redirecting after an API call or form submission, where the application's logic dictates the route change. Option B describes a static link, which is the primary use case for the Link component. While useRouter can handle history navigation (Option C), its core distinction from Link is for event-driven, application-controlled redirects.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles