How to use the Link component in Next.js?

import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog/hello-world">Blog Post</Link>
    </nav>
  );
}

// With dynamic segments
<Link href={`/blog/${post.slug}`}>Read More</Link>

// Using object
<Link
  href={{
    pathname: '/blog/[slug]',
    query: { slug: post.slug },
  }}
>
  Read More
</Link>

// Prefetch enabled by default in production
<Link href="/dashboard">Dashboard</Link>

// Disable prefetch
<Link href="/dashboard" prefetch={false}>
  Dashboard
</Link>

// Replace instead of push
<Link href="/login" replace>
  Login
</Link>

// Disable scroll to top
<Link href="/section" scroll={false}>
  Section
</Link>