The Link Component

<Link> from next/link renders a normal <a> tag, but clicking it changes the page without a full reload: only the new page segment is fetched, layouts stay, and state is kept.

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/products">Products</Link>
      <Link href="/products/42">Redmi Note 14</Link>
      <Link href={{ pathname: '/products', query: { category: 'books' } }}>Books</Link>
    </nav>
  );
}

In production, Next.js prefetches links when they appear in the viewport, so the next page opens almost instantly. Static routes are fully prefetched; dynamic routes prefetch up to the nearest loading.tsx.

<>
  <Link href="/account/orders" prefetch={false}>My Orders</Link> {/* turn off for rarely used links */}
  <Link href="/checkout" replace>Checkout</Link> {/* replace history entry */}
  <Link href="/products#reviews" scroll={false}>Reviews</Link>
</>