Next.js provides client-side navigation that's faster than a full page reload — it fetches only the new page's data/components and swaps them in, keeping shared layouts mounted.
The Link component (declarative)
tsx
;
() {
(
);
}
<Link> renders an <a> but intercepts the click for client-side navigation. Crucially, it prefetches the linked route when the link enters the viewport, so navigation feels instant.
"use client"; // useRouter needs a Client Component
import { useRouter } from "next/navigation"; // note: next/navigation in App Router
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // navigate after an action
// router.replace("/x") — no history entry
// router.back() — go back
// router.refresh() — re-fetch server data for the current route
}
}
Use useRouter when navigation must happen in response to logic (after a form submit, login, etc.), not a click on a link.
<Link> preloads routes before you click.In the App Router, hooks come from next/navigation (useRouter, usePathname, useSearchParams) — not the old next/router (which is Pages Router only). Mixing them up is a common error.
<Link> (with automatic prefetching) and useRouter are how you build the fast, SPA-like navigation Next.js is known for.
Using them instead of plain <a href> (which forces a full reload) is what keeps the app snappy and preserves layout state.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate