Notre avis

Cette compétence permet de migrer des composants ou pages Next.js du Pages Router vers l'App Router selon une architecture définie.

Automatise la conversion des fichiers de pages et des API routes
Transforme les méthodes de données serveur (getServerSideProps, getStaticProps) en composants serveur asynchrones
Gère la séparation entre composants serveur et client
Crée automatiquement les fichiers loading.tsx et error.tsx

Quand l'utiliser

Lorsqu'un projet Next.js utilisant le Pages Router doit être migré vers l'App Router.

Quand l'éviter

Pour des migrations partielles ou lorsque l'architecture cible n'est pas encore clairement définie.

Exemples

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