Our review

This skill migrates Next.js components or pages from the Pages Router to the App Router following a defined architecture.

Automates conversion of page files and API routes
Transforms server-side data methods (getServerSideProps, getStaticProps) into async server components
Handles separation of server and client components
Automatically creates loading.tsx and error.tsx files

When to use it

When a Next.js project using the Pages Router needs to be migrated to the App Router.

When not to use it

For partial migrations or when the target architecture is not yet clearly defined.

Examples

Migrate a page to App Router

Migrate the file pages/products/[id].tsx to the App Router following the architecture documentation.

Convert legacy data fetching

Convert getServerSideProps in components/UserProfile.tsx to async server component pattern.

Full component migration

I need to migrate my component MyComponent from Pages Router to App Router. The file is at src/components/MyComponent.tsx.

name: migration-migrate-component description: "Use when a component needs migration to the target architecture or framework version." user-invocable: true argument-hint: "[component-file]" allowed-tools: Read, Write, Edit, Bash, Glob, Grep

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

Component: $ARGUMENTS

Steps

Read docs/ARCHITECTURE.md sections 5 and 6.
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
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)
Convert data fetching:
- getServerSideProps -> async Server Component (service + adapter)
- getStaticProps -> async Server Component + revalidate
- getStaticPaths -> generateStaticParams()
- Client-side useEffect + fetch -> React Query hook
Determine Server vs Client:
- Data fetching only? -> Server Component
- Has hooks, events, browser APIs? -> Client Component
- Mixed? -> Split into Server page + Client component
Convert imports:
- useRouter from next/router -> useRouter + usePathname + useSearchParams from next/navigation
- Head -> metadata export or generateMetadata()
Create siblings:
- loading.tsx -- skeleton matching page structure
- error.tsx -- error boundary ('use client' required)
Type all props.
Decompose if > 200 lines.
Validate:

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