Routing
Beginner

Navigation and Linking

Master client-side navigation with Link component, useRouter hook, and programmatic navigation.

15 min
2 sections
navigation
link
use-router
1
2

01. The Link Component

Section 1 of 2

Use the Link component for client-side navigation between pages. It prefetches pages in the background for instant transitions.

typescript
import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog/first-post">Blog Post</Link>
    </nav>
  );
}
Back to Course