);
}
```
**Automatic Error boundary** - catches errors in page and nested segments.
---
## Server vs Client Components
### Server Components (Default)
```tsx
// app/page.tsx (Server Component by default)
import { prisma } from '@/lib/prisma';
export default async function HomePage() {
// Fetch data directly in component
const users = await prisma.user.findMany();
return (
{users.map(user => (
{user.name}
))}
);
}
```
**Benefits**:
- Zero JavaScript sent to client
- Direct database access
- Can use server-only code (Node.js APIs)
- Better performance (no hydration cost)
**Limitations**:
- Cannot use hooks (useState, useEffect)
- Cannot use browser APIs
- Cannot use event handlers directly
### Client Components
```tsx
// app/components/Counter.tsx
'use client'; // Opt-in to Client Component
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
```
**When to use**:
- Need hooks (useState, useEffect, useContext)
- Need event handlers (onClick, onChange)
- Need browser APIs (localStorage, window)
- Need third-party libraries that use hooks
**Add `'use client'`** at top of file.
### Mixing Server and Client Components
```tsx
// app/page.tsx (Server Component)
import { prisma } from '@/lib/prisma';
import Counter from './components/Counter'; // Client Component
export default async function HomePage() {
const users = await prisma.user.findMany();
return (
Users: {users.length}
{/* Server Component data passed to Client Component */}
);
}
```
**Rules**:
- Server Components can import Client Components
- Client Components cannot import Server Components directly
- Pass Server Component data as props to Client Components
### Composition Pattern (Server in Client)
```tsx
// app/components/ClientWrapper.tsx
'use client';
export default function ClientWrapper({ children }: { children: React.ReactNode }) {
const [isOpen, setIsOpen] = useState(false);
return (
{isOpen && children}
);
}
// app/page.tsx (Server Component)
import ClientWrapper from './components/ClientWrapper';
import ServerData from './components/ServerData'; // Server Component
export default function Page() {
return (
{/* ServerData rendered on server, passed as children */}
);
}
```
**Pass Server Components as children** to Client Components.
---
## Layouts and Templates
### Nested Layouts
```tsx
// app/layout.tsx (Root Layout)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
// app/dashboard/layout.tsx (Dashboard Layout)
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
// app/dashboard/page.tsx
export default function DashboardPage() {
return
Dashboard
;
}
```
**Result**:
```
Dashboard
```
**Layouts persist across navigation** - no re-render when switching pages in same layout.
### Templates (Re-rendered on Navigation)
```tsx
// app/dashboard/template.tsx
export default function DashboardTemplate({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
**Difference from Layout**:
- Layout: Persists, state preserved
- Template: Re-rendered on navigation, state reset
**Use templates for**:
- Page transitions/animations
- Resetting state on navigation
- useEffect that should run on every page load
---
## Routing Patterns
### Dynamic Routes
```
app/
blog/
[slug]/
page.tsx # /blog/:slug
```
```tsx
// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
return