Learn the concept
Navigation & Linking
Next.js provides the `Link` component for declarative client-side navigation and the `useRouter` hook for programmatic navigation, both enabling fast page transitions without full page reloads.
Navigation Methods:
<Link> Component (preferred)
onNavigate callback (v15.3+) for intercepting client-side navigationsuseRouter Hook
push(), replace(), back(), forward()redirect() Function
Prefetching:
prefetch={false}Active Link Styling:
usePathname() to check current routeonNavigate Prop (v15.3+):
The onNavigate callback fires during client-side navigation, allowing you to intercept or prevent navigation — useful for unsaved changes warnings or analytics.
import Link from 'next/link';
export default function Navigation() {
return (
<nav>
{/* Basic link */}
<Link href="/">Home</Link>
{/* Link with dynamic route */}
<Link href="/posts/123">Post 123</Link>
{/* Link with query params */}
<Link href="/search?q=nextjs">Search</Link>
{/* Link with object href */}
<Link
href={{
pathname: '/posts/[id]',
query: { id: '456' },
}}
>
Post 456
</Link>
{/* Disable prefetching */}
<Link href="/heavy-page" prefetch={false}>
Heavy Page
</Link>
{/* Replace history instead of push */}
<Link href="/login" replace>
Login
</Link>
</nav>
);
}Use the Link component with prefetching to create instant page transitions in a content-heavy site, giving users an app-like experience without full page reloads.
Build dynamic breadcrumbs using `usePathname()` to parse the current URL segments and render Link components for each level, with active styling for the current page.
Use Link's `onNavigate` callback to warn users about unsaved form data before navigating away, preventing accidental data loss in editing interfaces.
Build a set of navigation components — top navbar with active states, sidebar with collapsible sections, breadcrumbs, and pagination — all using Link with prefetching and usePathname for active states.
Create a multi-step form wizard where each step is a route. Use `onNavigate` to prevent skipping steps and warn about unsaved changes, with `useRouter` for programmatic step advancement.
Notion's web app uses client-side navigation for instant page switches between documents, prefetching linked pages for a seamless editing experience.
Linear uses programmatic navigation with keyboard shortcuts (Cmd+K) to jump between issues, projects, and views without mouse interaction.