Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    nextjs app router migration verifier

    1

    Migrate Next.js routes to App Router with mandatory verification of cache semantics and component boundaries.

    $18

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    nextjs app router migration verifier

    nextjs app router migration verifier

    Example session with this skill installed

    Migrate pages/profile/[id].tsx which uses getServerSideProps to fetch user data and next/head for the title.

    • Read your context and instructions
    • Compiled the nextjs app router

    I have analyzed the source. The original uses getServerSideProps (always fresh). Converted to App Router: fetch now includes { cache: 'no-store' } to prevent stale data. The next/head block is now a generateMetadata function. Awaiting your review of these specific diffs before proceeding.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    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.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 1 month ago

    • Passed all security checks, Safe to install

    Listed1 month ago

    What's inside

    Frequently Asked Questions