The Link Component

Link is the primary way to navigate between routes in a Next.js application. It extends the HTML element with client-side navigation and automatic prefetching, so it looks and behaves like a normal link while performing far better.

Basic Usage

TSX

import Link from 'next/link'

export function NavBar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  )
}

The href prop is required and works exactly like the href on a normal anchor tag — it can be a relative path, an absolute path, or even an external URL.

Dynamic hrefs

When linking to a dynamic route, build the href with a template literal using the data you already have, such as an id or slug from a list you're rendering.

TSX

import Link from 'next/link'

type Post = { slug: string; title: string }

export function PostList({ posts }: { posts: Post[] }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

Link also accepts an href object with pathname and query keys if you prefer to build the URL structurally instead of concatenating strings.

Automatic Prefetching

Whenever a Link enters the viewport (in production builds), Next.js automatically prefetches the linked route in the background. By the time a user actually clicks, most or all of the data the destination needs has already been fetched, which is what makes client-side navigations feel instant.

Route Type	Default Prefetch Behavior
Static route	Full route is prefetched and cached.
Dynamic route	Prefetching still occurs; shared layout data is prioritized.

The prefetch Prop

You can control this behavior explicitly with the prefetch prop. Setting it to false disables prefetching entirely, which can be useful for links that are rarely clicked or point to very heavy routes you don't want to fetch speculatively.

TSX

<Link href="/reports/annual" prefetch={false}>
  Annual Report (large page)
</Link>

Tip

Leave prefetch at its default in almost all cases. Only disable it when you have a concrete reason — like a rarely used route that is expensive to prefetch at scale.

Why Not a Plain <a> Tag?

Warning

Using a native <a href="/dashboard"> for internal navigation causes a full page reload — the browser discards the current page state and re-downloads everything from scratch. Always use Link for routes inside your own application.

Link performs client-side navigation — no full page reload.
Link prefetches automatically so navigations feel instant.
Plain <a> tags are still correct for linking to external sites.
Link forwards refs and most standard anchor props (className, target, etc).

Styling Active Links

Link doesn't add active-state styling automatically. Combine it with usePathname (covered in a later lesson) to detect the current route and apply an active class conditionally in a Client Component.

TSX

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

export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
  const pathname = usePathname()
  const isActive = pathname === href

  return (
    <Link href={href} className={isActive ? 'nav-link active' : 'nav-link'}>
      {children}
    </Link>
  )
}

Note

Link works fine inside both Server Components and Client Components — it doesn't require a 'use client' directive on its own. You only need 'use client' when the surrounding component uses state or hooks, as in the active-link example above.

For the vast majority of navigational UI — nav bars, cards, lists, buttons that go somewhere — Link should be your default choice. Reach for the useRouter hook, covered next, only when navigation needs to be triggered from inside a function rather than rendered as a clickable element.