Link Component

Link Features

<Link href="/page">
  Go to Page
</Link>

<Link 
  href="/page"
  prefetch={true}
>

<Link 
  href="/page"
  className="link"
>

<Link 
  href={`/post/${id}`}
>

🔹 Basic Link Usage

Import the Link component from next/link and use it like an anchor tag. The href prop specifies where the link should navigate to when clicked.

// Import Link component
import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  )
}

🔹 Link vs Anchor Tag

Understanding the difference between Link and regular anchor tags helps you choose the right tool. Use Link for internal navigation and anchor tags for external links.

// Internal link - Use Link
<Link href="/about">About Page</Link>

// External link - Use anchor tag
<a href="https://google.com" target="_blank">
  Google
</a>

🔹 Dynamic Links

Create links with dynamic values using template literals or variables. Perfect for blog posts, products, or any content with unique identifiers.

export default function BlogList() {
  const posts = [
    { id: 1, title: 'First Post' },
    { id: 2, title: 'Second Post' },
    { id: 3, title: 'Third Post' }
  ]
  
  return (
    <div>
      {posts.map(post => (
        <Link 
          key={post.id}
          href={`/blog/${post.id}`}
        >
          {post.title}
        </Link>
      ))}
    </div>
  )
}

🔹 Styling Links

Style Link components using className, inline styles, or CSS modules. The Link component renders as an anchor tag, so all standard CSS works perfectly.

🔸 Using className

import Link from 'next/link'

export default function StyledNav() {
  return (
    <Link 
      href="/about" 
      className="nav-link"
    >
      About Us
    </Link>
  )
}

// CSS
.nav-link {
  color: blue;
  text-decoration: none;
  padding: 10px;
}

🔸 Active Link Styling

'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function NavLink({ href, children }) {
  const pathname = usePathname()
  const isActive = pathname === href
  
  return (
    <Link 
      href={href}
      className={isActive ? 'active' : ''}
    >
      {children}
    </Link>
  )
}

🔹 Prefetching

Next.js automatically prefetches linked pages when they appear in the viewport. This makes navigation feel instant because the page is already loaded before users click.

// Prefetch enabled by default
<Link href="/about">About</Link>

// Disable prefetching
<Link href="/about" prefetch={false}>
  About
</Link>

🔹 Programmatic Navigation

Navigate programmatically using the useRouter hook when you need to redirect users based on logic, like after form submission or authentication.

'use client'
import { useRouter } from 'next/navigation'

export default function LoginButton() {
  const router = useRouter()
  
  const handleLogin = () => {
    // Perform login logic
    router.push('/dashboard')
  }
  
  return (
    <button onClick={handleLogin}>
      Login
    </button>
  )
}

🔹 Complete Navigation Example

Here's a full navigation component combining everything we've learned. It includes styled links, active states, and proper structure for a real application.

import Link from 'next/link'

export default function Header() {
  return (
    <header>
      <nav>
        <Link href="/">
          <h1>My Website</h1>
        </Link>
        
        <div>
          <Link href="/">Home</Link>
          <Link href="/about">About</Link>
          <Link href="/blog">Blog</Link>
          <Link href="/contact">Contact</Link>
        </div>
      </nav>
    </header>
  )
}