Next.js › Routing (App/Pages Router)
How do you use the Link component to enable fast client side navigation between pages?
IntermediateAnswer
You import the Link component from next/link and use it in place of a regular anchor tag for internal navigation, which automatically preloads the linked page's code in the background and navigates without a full page reload, making transitions between pages feel instant.
import Link from 'next/link';
export default function Navbar() {
return (
<nav>
<Link href="/about">About</Link>
<Link href="/contact">Contact</Link>
</nav>
);
}Real-world example A website's main navigation bar uses the Link component for every internal page, giving visitors an instant, app like feel as they move between pages without full page reloads.