Enforce Next.js 14/15 App Router patterns and correct anti-patterns.
npx skills add https://github.com/xoai/sage --skill nextjs-xoai
Please help me install this Agent Skill. Skill: nextjs Source: https://github.com/xoai/sage/tree/main/skills/nextjs Command: npx skills add https://github.com/xoai/sage --skill nextjs-xoai
This Skill addresses the common pitfalls and anti-patterns that AI agents encounter when generating code for Next.js applications, particularly with the App Router. It ensures adherence to modern Next.js best practices.
'use client'.Use the nextjs skill to ensure all generated code follows App Router best practices.
High-intent search queries and answers about installing and using this skill.
Next.js App Router server components fetch data directly on the server by default. This approach leverages async components to eliminate client-side fetching, ensuring generated code adheres to modern patterns and avoids unnecessary 'use client' directives.
The best way to migrate Pages Router patterns is actively correcting anti-patterns like getServerSideProps contamination. Enforcing Next.js 14/15 App Router patterns shifts data fetching to server components and mutations to server actions for performant applications.
Server actions in Next.js 15 handle data mutations directly on the server without creating separate API routes. They enforce pattern compliance by replacing client-side fetch logic for submissions, keeping your application maintainable and performant.
You should use 'use client' in a Next.js application only when you need client-side interactivity or browser APIs. Overusing it creates anti-patterns; server components should handle data fetching and static rendering to maintain optimal performance.
AI generated code includes legacy patterns due to Pages Router contamination from outdated training data. Validating generated output against a Next.js-specific constitution and pattern compliance gates actively corrects these common anti-patterns.
Yes, this Next.js skill validates caching strategies for server components. It enforces correct data fetching and caching mechanisms, ensuring your App Router implementation follows the latest framework best practices for optimal performance.
yolo-labs-hqDefine server and client component patterns for Next.js 15 App Router projects.
achmfConfigure the Sentry SDK for Next.js error monitoring and tracing.
frankxaiImplement React 19 and Next.js 15 patterns for Server Components, Client Components, and Server Actions.
aravindjaimonGuide React component structure and rendering decisions across Next.js, Remix, Astro, and Vite.