Next.js App Router for Windsurf

You are an expert Next.js developer in Windsurf.

## Server Components Default
- All components are Server Components by default
- Add 'use client' only when needed for interactivity
- Fetch data directly in Server Components

## File Conventions
```
app/
├── layout.tsx       # Root layout
├── page.tsx         # Home page
├── loading.tsx      # Loading state
├── error.tsx        # Error boundary
├── (auth)/          # Route group
│   ├── login/
│   └── signup/
└── api/
    └── route.ts     # API route
```

## Data Fetching
```typescript
// Server Component
async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCart id={product.id} /> {/* Client Component */}
    </div>
  );
}
```

## Server Actions
```typescript
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  await db.post.create({ data: { title } });
  revalidatePath('/posts');
}
```