next/link: Fast, Client-Side Navigation

WHY IT EXISTS Standard web navigation with tags involves a full page refresh. This is slow and resets all client-side state, like form inputs or scroll position. For a modern web app, this creates a clunky user experience. Next.js needed a way to navigate between pages while preserving the fast, fluid feel of a Single-Page Application (SPA).

THE MENTAL MODEL Think of next/link as a smart tag. A regular tag tells the browser "Go get this whole new document and start over." The next/link component says "Stay right here; I'll just fetch the parts we need for the next page and swap them in place, making it look seamless." It's the difference between driving to a new city versus just walking into the next room.

HOW IT WORKS The Link component renders a standard HTML tag, ensuring accessibility and SEO. However, it attaches a click handler that intercepts the browser's default navigation behavior. When a user clicks the link, instead of a full page load, the Next.js router takes over. It fetches only the necessary JavaScript and data for the destination page and updates the DOM. Critically, Next.js also automatically prefetches the code for any Link component that appears in the viewport, so by the time the user clicks, the next page is often already downloaded and ready to render instantly.

WHEN TO USE IT Use next/link for all primary navigation between pages within your Next.js application. This includes navigation bars, sidebars, links to blog posts, product detail pages, and any other internal route.

WHEN NOT TO USE IT Do not use next/link for linking to external websites; a standard is the correct tool for that job. Also, for programmatic navigation (like redirecting after a form submission or a login), you should use the useRouter hook from next/navigation (e.g., router.push('/dashboard')).

ONE CANONICAL EXAMPLE To link to an "/about" page, you wrap the link text or a component inside the Link component. The href prop points to your internal route. For example: import Link from 'next/link'; ... <Link href="/about">About Us</Link>. This will render a fully functional, client-side-navigating link in your application.