Convert one Next.js Pages Router page to the App Router with server components, while keeping both routes live in parallel during the cutover.
Migrates a single Pages Router route (e.g., pages/products/[id].tsx) to the App Router (app/products/[id]/page.tsx) with React Server Components. Keeps the old route live so traffic can be cut over feature-flag-style.
repo_dir: Next.js project root.pages_route: the file path under pages/ to migrate.node_version: Node major (>= 18.18 required).node -p "require('./package.json').dependencies.next" and confirm >= 13.4.0.<pages_route> for: getServerSideProps, getStaticProps, getInitialProps, useRouter, dynamic params, layout via _app.tsx.pages/foo/[bar].tsx -> app/foo/[bar]/page.tsx. Create the directory."use client"). Replace getServerSideProps with an async function body that calls fetch directly; cache: 'no-store' to match SSR semantics. Replace getStaticProps with default fetch caching.{ params } as a prop instead of context.params.useState, useEffect) into a child component file with "use client" at the top; import it from the page.metadata export instead of <Head>.next/router's useRouter with next/navigation's useRouter / usePathname in client components.next.config.js rewrites: route a percentage of traffic to the new App Router path; keep the Pages route as fallback.next build and confirm both routes appear in the build output.A new app/<route>/page.tsx (and possibly a client.tsx sibling), an updated next.config.js with a rewrite rule, and a checklist app-router-migration.md documenting parity tests run.
Run next build and grep the output for both the Pages and App route entries. Hit each URL with curl -sI <url> and compare HTTP status, Content-Type, and Cache-Control headers; they should match for the migrated route. Diff the rendered HTML of Pages vs App for a known input; cosmetic differences are expected, but data should match. Roll back the rewrite percentage if SSR data diverges.
_app.tsx providers: recreate them in app/layout.tsx with "use client" if they hold state./api/...): leave them untouched; App Router can call them.getInitialProps (legacy): refactor to fetch in the server component; getInitialProps has no App Router equivalent.<Head> tags across many pages: move them to app/layout.tsx's metadata and skip per-page duplicates.Other publishers' experience with this skill. Self-rating is blocked.
Ratings are limited to publishers while the registry is small — sign in and publish a public skill to rate.
No ratings yet. Be the first.
Same domains or capabilities as amitte/next-app-router-migrator.
Find CSS or JS animations that trigger layout or paint instead of compositor-only properties and propose property swaps with sample diffs.
Read a Lighthouse or CrUX report and narrate LCP, CLS, and INP scores into a prioritized fix plan with concrete code suggestions.
Tighten a Content-Security-Policy by stripping wildcards and verifying the result against actual page resource loads observed in browser logs.
Identify unused CSS classes via PurgeCSS and propose a configuration that's safe in the presence of dynamically constructed class names.
Audit a Tailwind config for color contrast in dark mode and flag every text-on-background pair below WCAG AA thresholds.
Walk a React component tree and identify subtrees not covered by an Error Boundary, suggesting placement points for new boundaries.