ask-nextjs-architect

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