jsschools

<Link>

Client-side navigation component that prefetches routes for fast transitions.

Since Next 13.4 (App Router) Spec ↗

Syntax

import Link from 'next/link'; <Link href="/path">Text</Link>

Parameters

NameTypeRequiredDescription
href string | UrlObject Yes Destination path or URL object.
prefetch boolean | null No Controls prefetching; `null` (default) prefetches on viewport, `false` disables it.
replace boolean No Replace the history state instead of pushing.

Returns

ReactElement — Renders an <a> with App Router navigation.

Examples

import Link from 'next/link'

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/blog/hello">Post</Link>
    </nav>
  )
}

import Link from 'next/link'

// Dynamic + disable prefetch + replace history
export function Card({ slug }: { slug: string }) {
  return (
    <Link href={`/products/${slug}`} prefetch={false} replace>
      View product
    </Link>
  )
}

Notes

In the App Router, `<Link>` automatically prefetches routes in the viewport (static routes fully, dynamic routes up to the nearest `loading.js`). It performs client-side navigation while preserving shared layouts. No need to nest an `<a>`; pass styling/className directly to `<Link>`.

See also