Migrate a Pages Router component/page to App Router following docs/ARCHITECTURE.md sections 5 and 6.

Component: $ARGUMENTS

Steps

1. Read docs/ARCHITECTURE.md sections 5 and 6.

2. Analyze the component/page:

   • Count lines (JSX, logic)
   • List: props, state, effects, data fetching methods
   • Check for getServerSideProps, getStaticProps, getStaticPaths
   • Check for useRouter from next/router
   • Check for Head component usage
   • Map who imports this component

3. Convert routing:

   • pages/xxx.tsx -> app/xxx/page.tsx
   • pages/xxx/[id].tsx -> app/xxx/[id]/page.tsx
   • pages/api/xxx.ts -> app/api/xxx/route.ts (or Server Action)

4. Convert data fetching:

   • getServerSideProps -> async Server Component (service + adapter)
   • getStaticProps -> async Server Component + revalidate
   • getStaticPaths -> generateStaticParams()
   • Client-side useEffect + fetch -> React Query hook

5. Determine Server vs Client:

   • Data fetching only? -> Server Component
   • Has hooks, events, browser APIs? -> Client Component
   • Mixed? -> Split into Server page + Client component

6. Convert imports:

   • useRouter from next/router -> useRouter + usePathname + useSearchParams from next/navigation
   • Head -> metadata export or generateMetadata()

7. Create siblings:

   • loading.tsx -- skeleton matching page structure
   • error.tsx -- error boundary ('use client' required)

8. Type all props.

9. Decompose if > 200 lines.

10. Validate:

npx tsc --noEmit
npx next build
npx vitest run --passWithNoTests