What is the Next.js Link component?
Why Interviewers Ask This
This is a classic screening question for Next.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
The <Link> component from next/link is Next.js's primary navigation tool. It extends the HTML <a> tag with client-side navigation and automatic prefetching. Basic usage: import Link from "next/link"; <Link href="/about">About</Link> <Link href={{ pathname: "/users/[id]", query: { id: "123" } }}>User 123</Link>. Key features: (1) Client-side navigation: navigates without a full page reload, preserving React state; (2) Automatic prefetching: in production, when a Link is visible in the viewport, Next.js prefetches the destination's code and data. By the time the user clicks, navigation is instant; (3) Active link styling: use usePathname() to check if the link's href matches the current path and conditionally apply active styles; (4) Scroll behavior: by default, scrolls to top on navigation. scroll={false} prevents scroll. Props: href (required — string or object), replace (replace history instead of push), scroll (default true), prefetch (default true in prod, disable with false), legacyBehavior (wrap child <a> tag — for compatibility). App Router change: in Next.js 13+ App Router, Link no longer requires a child <a> tag — it renders <a> directly. All standard anchor attributes (className, onClick, etc.) can be passed directly to Link. Custom components: for UI library buttons as links, use router.push() in onClick instead of Link.
Pro Tip
Demonstrate both theoretical understanding and practical experience. Say what it is, then give an example of how you actually used it in a Next.js codebase.
Previous
What is the difference between useRouter in Pages Router vs App Router?
Next
What is Next.js Turbopack?