Implementing Client-Side Navigation

Explain with code how to use the Link component from Next.js to enable client-side navigation between pages without full page reloads.

import Link from 'next/link';

// Example component with client-side navigation using Next.js Link
function NavigationMenu() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
        <li>
          <Link href="/contact">
            <a>Contact</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
}

This Next.js code example uses the Link component to create a navigation menu enabling client-side routing. When each link is clicked, the browser does not perform a full page reload. Instead, Next.js handles the navigation client-side, meaning it will be faster and won't require server round trips.