Detect deprecated Pages Router patterns and invalid Server/Client boundaries in Next.js App Router code.
npx skills add https://github.com/tnunamak/dotfiles --skill nextjs-tnunamak
Please help me install this Agent Skill. Skill: nextjs Source: https://github.com/tnunamak/dotfiles/tree/main/ai/skills/local/nextjs Command: npx skills add https://github.com/tnunamak/dotfiles --skill nextjs-tnunamak
It helps you avoid common Next.js App Router mistakes and rapidly move from outdated Pages Router patterns to the correct App Router approaches for routing, Server Components, data fetching, caching, and metadata.
Ask: "Review my Next.js codebase and tell me what I should change to correctly use the App Router (Server Components, route handlers, middleware→proxy, and async params/cookies/headers) and provide targeted migration fixes."
High-intent search queries and answers about installing and using this skill.
To migrate Next.js Pages Router patterns, identify outdated approaches like getServerSideProps, getStaticProps, and next/router, then replace them with App Router equivalents using Server Components for data fetching and the new routing conventions for navigation.
In Next.js 15+, params, searchParams, cookies, and headers are asynchronous and must be awaited. Failing to await these APIs in Server Components or route handlers causes data-fetching and rendering errors.
Next.js App Router metadata requires exporting a static metadata object or an asynchronous generateMetadata function from your layout or page. It replaces next/head and dynamically generates SEO tags based on route params and fetched data.
Use 'use client' when you need interactivity, state, or browser APIs, isolating it to the smallest component subtree. Detect invalid boundaries by checking if Server Components incorrectly attempt to use hooks or event handlers.
Migrating Next.js middleware to proxy conventions involves updating your routing logic to the Next.js 16 proxy architecture. This ensures correct request interception and response modification before hitting the App Router.
Next.js App Router enforces specific caching signatures, including revalidateTag and cacheHandlers (formerly cacheHandler). Validate your route handlers and caching logic against current API expectations to avoid stale data and runtime errors.
kriegcloudIntegrate the Agentation visual feedback toolbar into Next.js projects.
yolo-labs-hqDefine server and client component patterns for Next.js 15 App Router projects.
masermediagroup-stackProvide structured Next.js App Router guidance for server components, route handlers, and metadata.
rauell1Fix Next.js App Router implementation and migration issues in production applications.
