easyFrontend

How does client-side navigation work in Next.js (next/link and useRouter)?

Q: How does client-side navigation work in Next.js (next/link and useRouter)?

**TL;DR.** next/link renders an anchor that does **client-side navigation** and **prefetches** the target route's code/data when it enters the viewport. useRouter() 's push / replace navigate **programmatically**. Both avoid full page reloads while keeping shared **layouts mounted**. <Link> prefetch on view click soft navigation <text class='

984 views

Understand the problem

SPA-like transitions with prefetching.

nextjsnavigationnext-linkprefetch

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Link + programmatic navigation

import Link from 'next/link';
// declarative — prefetches /dashboard, soft-navigates on click
<Link href="/dashboard">Dashboard</Link>;

'use client';
import { useRouter } from 'next/navigation';
function SaveButton() {
  const router = useRouter();
  return <button onClick={async () => { await save(); router.push('/done'); }}>Save</button>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do environment variables work in Next.js (the NEXT_PUBLIC_ prefix)?

How does file-based routing work in the Next.js App Router?