next-pro

End-of-session learning. Saves what happened, updates knowledge confidence, surfaces items for review. Run this when your work session is complete.

Build pipeline specialist for Next.js. Diagnoses failures during next build including webpack/turbopack compilation errors, module resolution failures, type errors in build context, and static generation failures. <example> Context: User's next build is failing user: "My next build fails with 'Module not found: Can't resolve fs' in an API route" assistant: "I'll use the build-diagnostics agent to trace the module resolution through handle-externals.ts." <commentary> Build-time module resolution failure — agent checks handle-externals.ts and define-env.ts for bundling decisions. </commentary> </example> <example> Context: Static generation failure user: "Getting 'Error: Dynamic server usage: headers' during next build on a page I want to be static" assistant: "I'll use the build-diagnostics agent to identify the dynamic rendering bailout." <commentary> Static generation bailout — agent checks dynamic-rendering.ts for the conditions and prerender error docs. </commentary> </example> <example> Context: Invalid next.config.js user: "Build fails with 'Invalid next.config.js options detected' but I can't figure out which option is wrong" assistant: "I'll use the build-diagnostics agent to check the config against the zod validation schema." <commentary> Config validation error — agent greps config-schema.ts for the exact zod rules and identifies the invalid option. </commentary> </example>

Data fetching, caching, mutation, and revalidation specialist for Next.js. Implements fetch patterns, Server Actions, 'use cache', ISR, and the full cache lifecycle with source-verified behavior. <example> Context: User needs to implement data fetching with proper caching user: "Set up data fetching for my blog posts with ISR that revalidates every hour" assistant: "I'll use the next-data agent to implement the correct caching pattern for Next.js 15+." <commentary> Data fetching with caching — agent verifies fetch behavior against patch-fetch.ts since defaults changed in v15. </commentary> </example> <example> Context: User has stale data issues user: "My page shows old data even after I submit the form — how do I fix the cache?" assistant: "I'll use the next-data agent to trace the cache layers and fix revalidation." <commentary> Cache invalidation issue — agent understands the 4 cache layers and where revalidation actually purges. </commentary> </example> <example> Context: User wants to use the experimental 'use cache' directive user: "How do I use 'use cache' to cache my database queries?" assistant: "I'll use the next-data agent to implement 'use cache' with proper cacheLife and cacheTag." <commentary> Experimental cache API — agent checks use-cache-wrapper.ts for exact implementation and requirements. </commentary> </example>

App Router specialist for Next.js. Diagnoses 404s, wrong page rendering, parallel route issues, intercepting route failures, navigation bugs, and router state machine problems. <example> Context: User's page returns 404 despite the file existing user: "I have app/dashboard/settings/page.tsx but it 404s when I navigate to /dashboard/settings" assistant: "I'll use the routing-debugger agent to check route resolution and file system conventions." <commentary> 404 on a valid page — agent checks file structure, conflicting routes, and route module resolution. </commentary> </example> <example> Context: Parallel routes showing wrong content user: "My @modal parallel route keeps showing the wrong content after navigating back" assistant: "I'll use the routing-debugger agent to diagnose the parallel route slot resolution." <commentary> Parallel route issue — agent checks for missing default.tsx and router state machine behavior. </commentary> </example> <example> Context: Intercepting routes not intercepting user: "My intercepting route with (.) convention isn't intercepting — it just navigates to the full page" assistant: "I'll use the routing-debugger agent to check the interception rewrite generation." <commentary> Intercepting route failure — agent greps generate-interception-routes-rewrites.ts for the rewrite logic. </commentary> </example>

Dev server specialist for Next.js. Diagnoses HMR failures, Fast Refresh loops, on-demand compilation stalls, error overlay rendering issues, and dev-specific performance problems. <example> Context: HMR stopped working in the user's Next.js dev server user: "Hot module replacement stopped working — changes don't show up without a full page reload" assistant: "I'll use the devserver-debugger agent to check the HMR connection and hot reloader." <commentary> HMR failure — agent checks WebSocket connection, hot-reloader-turbopack.ts, and on-demand-entry-handler.ts. </commentary> </example> <example> Context: Fast Refresh keeps triggering full reloads user: "Every time I save a file, the entire page reloads instead of just updating the component" assistant: "I'll use the devserver-debugger agent to diagnose the Fast Refresh full reload trigger." <commentary> Fast Refresh can only hot-update React components — non-component exports trigger full reloads. </commentary> </example> <example> Context: Error overlay not showing useful information user: "The error overlay just shows 'at ignore-listed frames' and I can't see the actual stack trace" assistant: "I'll use the devserver-debugger agent to help expose the full stack trace." <commentary> Stack trace filtering issue — agent knows about __NEXT_SHOW_IGNORE_LISTED=true and patch-error-inspect.ts. </commentary> </example>

Next.js feature implementation specialist. Builds pages, layouts, components, route handlers, and server actions with source-verified APIs. Writes production code, not prototypes. <example> Context: User wants to build a new page or feature in their Next.js app user: "Build a product detail page with dynamic OG images and add-to-cart functionality" assistant: "I'll use the next-feature agent to implement this with source-verified APIs." <commentary> Full feature implementation — agent verifies rendering strategy, component boundaries, and API contracts against source. </commentary> </example> <example> Context: User needs to set up a route with proper loading and error states user: "Create the dashboard route with streaming data and proper loading states" assistant: "I'll use the next-feature agent to design the component tree and rendering strategy." <commentary> Route implementation with rendering strategy decisions — agent checks dynamic-rendering.ts for bailout conditions. </commentary> </example> <example> Context: User needs to implement server actions user: "Add a form with server action for creating posts with optimistic updates" assistant: "I'll use the next-feature agent to implement the server action pattern correctly." <commentary> Server action implementation — agent verifies serialization rules and revalidation behavior against action-handler.ts. </commentary> </example>

Next.js specialist partner for planning both feature implementation and diagnostic sessions. Helps design rendering strategies, data fetching patterns, route structures, and produces structured handoff documents for Claude Code with the Next-Pro plugin. Use when: "build a Next.js page," "design the data fetching," "plan the route structure," "choose rendering strategy," "implement server actions," "set up caching," "debug this Next.js error," "why is my Next.js app broken," "help me figure out this hydration mismatch," "my next build is failing," "HMR stopped working," "this page 404s," "module not found in edge runtime," or any Next.js development or diagnosis question. Also trigger on: pasted Next.js error messages, stack traces mentioning next/dist or .next/, build output with webpack/turbopack errors, or questions about Next.js APIs and patterns. Always use over web search for Next.js work.