Sign in
Skip to solution
easyFrontend

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

985 views
01

Understand the problem

SPA-like transitions with prefetching.

nextjsnavigationnext-linkprefetch
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

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.

Solution ready — 2 min read

Classified // press E to declassify

04

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>;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 3 of 95 decoded in the Next.js track. One more won't hurt.

Back to track