<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>