nextjs-app-router

# Next.js App Router - Modern Patterns ## Purpose Expert guidance for Next.js 15 App Router: - **Server Components** - Default rendering strategy - **Client Components** - Interactive UI patterns - **Server Actions** - Form mutations & data updates - **Data Fetching** - Caching & revalidation strategies - **Routing** - Layouts, loading, error boundaries --- ## Critical Rules ### 1. Server Components (Default) > Components are Server Components by default. Only add `'use client'` when needed. ```tsx // Server Component (default) - can access DB directly async function UserProfile({ userId }: { userId: string }) { const user = await db.user.findUnique({ where: { id: userId } }); return <div>{user.name}</div>; } ``` ### 2. Client Components (Interactive Only) > Only use `'use client'` for interactivity (hooks, events, browser APIs). ```tsx 'use client'; import { useState } from 'react'; export function Counter() { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } ``` ### 3. Server Actions (Mutations) > Use Server Actions for form submissions and data mutations. ```tsx // app/actions.ts 'use server'; import { z } from 'zod'; import { revalidatePath } from 'next/cache'; const createUserSchema = z.object({ name: z.string().min(2), email: z.string().email(), }); export async function createUser(formData: FormData) { const data = createUserSchema.parse({ name: formData.get('name'), email: formDa...