Topic
Definition
Next.js Link performs client-side navigation to internal routes, while useRouter exposes imperative navigation methods from a Client Component.
In simpler words
Use Link for a normal in-app destination and router methods after a user action decides where to go.
Navigation should preserve the app experience while retaining normal browser behavior for external destinations.
A link expresses a destination in the UI and remains accessible to keyboard and assistive-technology users. It is the default for navigation menus, breadcrumbs, and item rows.
Imperative navigation belongs in an event handler, for example after a completed create action. Because handlers run in the browser, the component using useRouter needs the use client directive.
import Link from 'next/link';
<Link href="/course/frontend">Frontend path</Link>
'use client';
const router = useRouter();
router.push('/course/frontend/week/1');The link describes a destination; router.push follows an event-driven decision.
// Wrong — requests a new document
<a href="/course/frontend">Frontend</a>
// Right — Next manages internal navigation
<Link href="/course/frontend">Frontend</Link>Use a normal anchor for external URLs, downloads, and intentionally full navigations.
Definition
Navigation after a write should follow a confirmed success state, not just a button click.
In simpler words
Do not send a learner to a detail page for a ticket Nest rejected.
Use router.replace when the old history entry should not return users to a completed sign-in or setup step.
Preserve query parameters deliberately when filters or pagination are part of the destination state.
Live playground
Compare a Link destination with router.push after an event.
Prefetch + client transition for internal routes.
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 2 · practical 3 · logic 2