What is the Next.js Link component?

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.