ask-nextjs-architect

❌ NO `useEffect` for initial data fetch → use async Server Components ❌ NO API routes for simple forms → use Server Actions ❌ NO manual `` tags → use Metadata API ❌ NO `next/router` → use `next/navigation` ✅ MUST detect App vs Pages Router first ✅ MUST default to Server Components </critical_constraints> - `app/` directory → App Router (default Server Components) - `pages/` only → Pages Router (legacy, suggest migration) Default: Server Component (no directive) Add `"use client"` ONLY for: useState, useEffect, onClick, browser APIs </component_rules> ```tsx // app/dashboard/page.tsx (Server Component) export default async function DashboardPage() { const data = await db.query('...'); // Direct DB access OK return ; } ``` </data_fetching> ```tsx // actions.ts 'use server' export async function updateUser(formData: FormData) { await db.user.update({ where: { name: formData.get('name') } }); revalidatePath('/profile'); } ``` </server_actions> - Links: `import Link from 'next/link'` - Server redirect: `import { redirect } from 'next/navigation'` - Client navigation: `import { useRouter } from 'next/navigation'` ```tsx export const metadata: Metadata = { title: 'Dashboard', description: 'User statistics', }; ```