Link component & navigation in Next.js

'use client'

import Link from 'next/link'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'

export default function NavigationExample() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  return (
    <nav>
      {/* Basic Link */}
      <Link href="/about">About</Link>
      
      {/* Dynamic Link */}
      <Link href="/blog/my-post">Blog Post</Link>
      <Link href={`/products/${productId}`}>Product</Link>
      
      {/* With query params */}
      <Link href="/shop?category=electronics">Electronics</Link>
      <Link href={{ pathname: '/shop', query: { category: 'books' } }}>
        Books
      </Link>
      
      {/* Active link styling */}
      <Link 
        href="/dashboard"
        className={pathname === '/dashboard' ? 'active' : ''}
      >
        Dashboard
      </Link>
      
      {/* Programmatic navigation */}
      <button onClick={() => router.push('/login')}>
        Login
      </button>
      
      <button onClick={() => router.back()}>
        Go Back
      </button>
      
      <button onClick={() => router.refresh()}>
        Refresh
      </button>
      
      {/* Prefetch control */}
      <Link href="/heavy-page" prefetch={false}>
        Heavy Page (no prefetch)
      </Link>
    </nav>
  )
}