Next.js 16+ · Module

next/link

The Link component from next/link is the primary way to navigate between routes in a Next.js App Router application. It extends an HTML anchor with client-side navigation and route prefetching.

How it works

Import Link from next/link and provide the required href. Next.js renders an anchor-like component that keeps navigation inside the app, performs client-side transitions, and can prefetch the linked route and its data as links enter the viewport.

Syntax

<Link href="/dashboard">Dashboard</Link>

Parameters

Name	Type	Description
`href`	`String or Object`	Destination path or URL; required.
`as`	`String or Object`	Alternative displayed URL; optional.
`prefetch`	`boolean`	Controls whether route data is prefetched; true by default, or false for hover-only prefetching.
`scroll`	`boolean`	Controls scroll position behavior after navigation.
`onNavigate`	`function`	Handler invoked during client-side navigation; receives an event with preventDefault().

Returns

A React component rendering an anchor-like link with client-side navigation and prefetching.

Key points

Use Link as the default component for navigation between routes in a Next.js application.
Link preserves anchor semantics while adding framework navigation features.
The required href prop accepts the destination path or URL.
In production, visible links can trigger background loading before the user clicks.
Prefetching prepares the route and its data to improve client-side navigation performance.
Set prefetch to false to disable viewport prefetching while retaining hover prefetching.

Common mistakes

Viewport prefetching does not occur during development; test production behavior when evaluating prefetching.
Use href for the destination; do not omit it.
Navigation event handlers can cancel the transition with preventDefault(), so cancellation logic should be deliberate.

Example: Internal navigation with Link

import Link from 'next/link'

export default function Page() {
  return (
    <nav aria-label="Main navigation">
      <Link href="/dashboard">Dashboard</Link>
      <Link href={{ pathname: '/search', query: { q: 'next' } }}>
        Search
      </Link>
    </nav>
  )
}

This component renders internal links using path and object-form URLs; Next.js can navigate client-side and prefetch linked routes in production.

When to use it

Internal route links

Navigate between pages in the same Next.js application.

Performance-oriented navigation

Preload likely destinations for faster transitions in production.

Application navigation

Build navigation menus with accessible anchor semantics.

Dynamic and query-string links

Pass dynamic paths or query parameters to routes.

useRouter
usePathname
useSearchParams

Source: Link - Next.js. Checked 2026-10-15.