Internal route navigation
A navigation menu points to another route in the same Next.js app.
Next.js 16+ · Component
Link
Link is the primary Next.js component for navigating between application routes. It extends an HTML anchor with client-side navigation and route prefetching.
How it works
Import Link from next/link and give it the required href plus link content. For internal routes, it enhances the HTML anchor with client-side navigation and viewport-triggered prefetching; use its options to control history, scrolling, or prefetch behavior.
Syntax
<Link href="/path">Link text</Link>Parameters
| Name | Type | Description |
|---|---|---|
href | string | object | The path or URL to navigate to. |
prefetch | boolean | 'auto' | Whether to prefetch the linked route; defaults to true. |
replace | boolean | Whether to replace the current history entry instead of pushing one. |
scroll | boolean | Whether navigation should scroll to the top; defaults to true. |
Returns
A React Link component rendered as an HTML anchor with client-side navigation and prefetching behavior.
Key points
- Link preserves anchor behavior while adding Next.js navigation features.
- Prefer Link for navigation between routes handled by the application.
- The required href prop accepts either a route path or a URL.
- The default prefetch setting loads the linked route and data ahead of navigation.
- Disabling prefetch prevents viewport-triggered loading but retains hover prefetching.
Common mistakes
- Do not expect route prefetching while developing locally.
- Use replace when navigation should not add another browser-history entry.
Example: Link to an internal route
import Link from 'next/link'
export default function Page() {
return (
<main>
<h1>Dashboard</h1>
<Link href="/settings">Open settings</Link>
</main>
)
}Renders a route link that uses Next.js client-side navigation and can prefetch the destination.
When to use it
Prefetched navigation
A visible destination should load ahead of an expected click in production.
History replacement
A filter or redirect should change the URL without adding browser history.
Interview questions
QWhat is Link used for?
Link is a React component imported from next/link. It extends an HTML anchor with client-side navigation and prefetching, and it is the primary way to navigate between routes.
Follow-up: How would you avoid adding a history entry? Set replace to true so the current history state is replaced.
QWhat is the required prop?
href is required and identifies the path or URL to navigate to. Link renders accessible anchor semantics while enabling Next.js navigation behavior for application routes.
Follow-up: What should be used for an external destination? Use an ordinary a element rather than Link.
QHow does prefetching work?
By default, Link prefetches the full route and its data when it enters the viewport, but this behavior is production-only. Setting prefetch to false disables viewport prefetching while hover prefetching still occurs.
Follow-up: Why might prefetching not appear during local testing? The documentation states that prefetching is enabled only in production.
Related
next/linkuseRouterclient-side navigationprefetching