Q22: When should you use <Link> versus the useRouter Hook for navigation?
<Link href="...">: Primary navigation method. Automatically prefetches linked route JS and RSC payloads into viewport memory for instant transitions.useRouter()(next/navigation): Used for programmatic imperative navigation inside event handlers (e.g.,router.push('/dashboard')after form submission).
Link Prefetching and useRouter Navigation
import Link from 'next/link';
import { useRouter } from 'next/navigation'; // App Router import!
export function NavComponent() {
const router = useRouter();
const handleAction = async () => {
await submitData();
router.push('/success'); // Imperative route change
};
return <Link href="/about">About</Link>; // Automatic prefetching
}💡 Link pre-fetches targets automatically; useRouter handles programmatic route redirects.
Key Takeaways
- Always prefer
<Link>for visual anchor links due to automatic viewport prefetching. - Import
useRouterstrictly fromnext/navigationin the App Router (notnext/router).
Knowledge Check
Which import path must be used for the useRouter hook inside the App Router?