nextjs app router migration verifier

The problem

Migrating from Next.js Pages Router to App Router is prone to silent regressions. Standard build checks and type systems cannot detect when a fresh getServerSideProps call is replaced by a default fetch, which Next.js caches by default, leading to stale data bugs in production.

What it does

• Performs a mandatory before/after comparison of data-fetching cache semantics, ensuring getServerSideProps and getInitialProps are correctly ported to { cache: 'no-store' }.
• Identifies and migrates next/head tags to the Metadata API to prevent SEO tags from silently disappearing.
• Verifies async conversion for cookies() and headers() to catch missing awaits that pass linting but fail at runtime.
• Audits the Server/Client Component boundary to ensure internal database fields or API keys do not leak into the browser bundle.
• Converts legacy getStaticPaths and fallback logic to generateStaticParams and dynamicParams.

Frameworks & tools

Next.js (Pages Router and App Router), React, TypeScript.

Why this beats prompting it yourself

General LLM prompts often hallucinate that fetch() is a drop-in replacement for legacy data methods, missing the critical caching default change. This skill enforces a hard stop between routes, preventing the "unsupervised bulk migration" pattern that causes developers to overlook layout-level fetching bugs and metadata omissions.

Use cases

• Converting complex authenticated routes that rely on per-request data freshness.
• Refactoring SEO-heavy marketing pages from legacy next/head blocks to the modern Metadata API.
• Moving Node.js-based API routes to Web-standard Route Handlers.
• Verifying that new layout.js data fetching does not inadvertently cache user-specific data.

Known limitations

Does not handle middleware.ts logic or differences. Requires a manual review stop after every single route conversion to ensure accuracy.