Detect and fix Next.js App Router anti-patterns in code reviews.
npx skills add https://github.com/mcclowes/puzzles --skill nextjs-anti-patterns
Please help me install this Agent Skill. Skill: nextjs-anti-patterns Source: https://github.com/mcclowes/puzzles/tree/main/.claude/skills/nextjs-anti-patterns Command: npx skills add https://github.com/mcclowes/puzzles --skill nextjs-anti-patterns
This Skill helps identify and fix common Next.js App Router anti-patterns, such as misuse of useEffect, improper client/server boundaries, and inefficient data-fetching patterns.
Audit a Next.js App Router project for common anti-patterns, then refactor components to prefer server components, minimal client components, and proper data-fetching patterns.
High-intent search queries and answers about installing and using this skill.
useEffect for data fetching is an anti-pattern in Next.js App Router. Instead, fetch data directly in server components or use route handlers, which eliminate unnecessary client-side JavaScript and hydration mismatches while improving performance.
Server components in Next.js App Router enable direct database access, keep secrets server-side, and reduce client JavaScript bundle size. They handle SSR natively and eliminate common useEffect and browser-detection mistakes that hurt performance.
Fetch data directly in server components using async functions, or use route handlers for client-side requests. Avoid useEffect-based fetching, which causes hydration issues and duplicates requests. This approach improves SSR safety and performance.
When migrating from Pages Router to App Router, replace getServerSideProps and getStaticProps with server component async functions, move client-side state into Client Components marked with 'use client', and eliminate useEffect data fetching in favor of server-side patterns.
Improper boundaries occur when you use client components for data fetching, browser detection, or state management that should happen server-side. Next.js App Router anti-pattern detection identifies these misplacements and helps enforce correct component roles for optimal rendering and performance.
No—browser APIs fail in server components and cause hydration errors. Anti-pattern detection catches direct browser checks and localStorage access in server contexts, guiding you to isolate these in Client Components or eliminate them entirely through server-side patterns.
PlazaCCIdentify and enforce Next.js best practice guidelines across a codebase.
Trio-Blockchain-LabsApply React and Next.js performance best practices across component design, data fetching, and code reviews.
JaylaelikeConsolidate Next.js 15 App Router patterns for pages, routes, and middleware.
edulazaroAnalyze Livewire and Volt components for performance anti-patterns in PHP and Blade templates.
