When will you use this?

You use layouts and styling in every page you build from your first screen to production.

• Course catalogs, lesson sidebars, and instructor dashboards all use layouts and shared navigation.
• When a student opens a lesson page, nested layouts keep the header and progress bar consistent.

Real-world: ShopNest storefront

The E-commerce team building ShopNest storefront uses Navigation and Linking to move between catalog, lesson, and profile without full page reloads. customers and admins never see the TypeScript files — they just get a fast, reliable product pages, cart, and checkout flow.

Production-style code

import Link from 'next/link';

export default function CoursesPage() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/courses/nextjs-fundamentals">Next.js course</Link>
      <Link href="/dashboard">My learning</Link>
    </nav>
  );
}

What happens in production: In ShopNest storefront, getting Navigation and Linking right means customers and admins trust the product pages, cart, and checkout flow every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

import Link from 'next/link';

export default function CoursesPage() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/courses/nextjs-fundamentals">Next.js course</Link>
      <Link href="/dashboard">My learning</Link>
    </nav>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Link renders an anchor with client-side transition.
• href must match your app/ structure.
• Use only for external sites.

1. Replace internal links with Link
2. Hover links in dev — notice prefetch in Network tab
3. Add active link styling with usePathname in a Client nav component
4. Use router.push in a Client form after login success
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Link = fast internal navigation. useRouter for imperative redirects. External links use plain .