Client-side navigation in Next.js uses the Link component from next/link and the useRouter hook from next/navigation (App Router). Links prefetch routes in the viewport for snappy transitions.
Link basics
import Link from 'next/link';
<Link href="/about">About</Link>
<Link href="/blog/hello">Hello post</Link>Prefer Link over raw <a> for internal routes—it avoids full page reloads and enables prefetching.
Programmatic navigation
'use client';
import { useRouter } from 'next/navigation';
function LogoutButton() {
const router = useRouter();
return <button onClick={() => router.push('/login')}>Log out</button>;
}Playground note
Below we simulate client navigation with React state—the same UX pattern Link provides in a real app. In projects, import Link and useRouter from Next.js packages.
Self-check
- Why use
Linkinstead of<a href>for internal routes? - Which hook replaces the old Pages Router
useRouterfromnext/router?
Challenge
Mini nav
- Click each nav button and confirm the active page label updates.
- Add a third route label to the array and a matching button.
Done when: three routes switch content without a full reload pattern (state-driven).
Challenge
Third route
- Add a Contact route to the nav array and button.
- Confirm active styling follows the new path.
Done when: three nav buttons switch the active route label.