Next.js: App Router and Routing (Step 2)

1. File-System Based Routing

Next.js's App Router defines routes using the file system. The folder structure inside the app directory directly translates to URL paths.

• app/page.tsx -> /
• app/about/page.tsx -> /about
• app/blog/[id]/page.tsx -> /blog/123 (Dynamic Route)

---

2. Layouts and Pages

• layout.tsx: UI shared across multiple pages (Headers, Footers, etc.). It maintains state during navigation and does not re-render between page transitions.
• page.tsx: Represents the unique UI for a specific route.

---

3. Navigation with Link

Instead of using the standard HTML <a> tag, using Next.js's <Link> component enables client-side navigation, which significantly improves performance.

import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/dashboard">Dashboard</Link>
    </nav>
  );
}

---

4. Programmatic Navigation (useRouter)

Used when you need to trigger a page navigation within an event handler.

'use client';

import { useRouter } from 'next/navigation';

export default function LoginButton() {
  const router = useRouter();

  return (
    <button onClick={() => router.push('/dashboard')}>
      Login
    </button>
  );
}