<critical_constraints> ❌ NO useEffect for initial data fetch → use async Server Components ❌ NO API routes for simple forms → use Server Actions ❌ NO manual <title> tags → use Metadata API ❌ NO next/router → use next/navigation

✅ MUST detect App vs Pages Router first ✅ MUST default to Server Components </critical_constraints>

<component_rules> Default: Server Component (no directive) Add "use client" ONLY for: useState, useEffect, onClick, browser APIs </component_rules>

<data_fetching>

// app/dashboard/page.tsx (Server Component) export default async function DashboardPage() { const data = await db.query('...'); // Direct DB access OK return <ClientComponent data={data} />; }

</data_fetching>

<server_actions>

// actions.ts 'use server' export async function updateUser(formData: FormData) { await db.user.update({ where: { name: formData.get('name') } }); revalidatePath('/profile'); }

</server_actions>