Link component navigation

This page explains how to implement client-side navigation in Next.js using the Link component.

Link

<Link> is a React component that extends the HTML <a> element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js.

Unlike traditional <a> tags, which trigger full page reloads, the <Link> component:

• Prefetches linked pages in the background
• Enables instant page transitions
• Avoids unnecessary server requests

Basic implementation

To use the Link component:

1. Import it from “next/link”
2. Replace <a> tags with <Link> components
3. Specify the destination using the href prop

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <Link href="/blog">Blog</Link>
      <Link href="/products">Products</Link>
    </nav>
  );
}

Dynamic navigation

For routes with dynamic segments, construct the href prop using template literals or variables:

// Dynamic product links
export default function ProductLinks() {
  const productId = "iphone-15";

  return (
    <div>
      {/* Static product link */}
      <Link href="/products/macbook">MacBook</Link>

      {/* Dynamic product link */}
      <Link href={`/products/${productId}`}>iPhone 15</Link>
    </div>
  );
}

Good to know

• The href prop is mandatory
• Links are automatically prefetched by default when they enter the viewport
• The Link component renders an <a> tag under the hood
• Client-side navigation only works for internal links within your application

The Link component is essential for:

• Navigation menus
• Internal links in content
• Any clickable element that should trigger a route change