nextjs-anti-patterns

Next.js App Router anti-patterns include misused useEffect for data fetching, unnecessary client-side state, incorrect Server/Client component boundaries, and browser detection outside proper contexts. This Skill detects these issues during code reviews and migrations, flagging violations like useEffect-driven data fetching and explicit any types in TypeScript.

useEffect for data fetching is an anti-pattern in App Router because Server Components handle data fetching directly. useEffect runs only on the client, delaying data retrieval, increasing bundle size, and breaking Server Component benefits. Use async Server Components or route handlers instead.

Browser detection must occur directly in Client Components without useEffect wrappers. Store detection logic in dedicated Client Components and import them where needed. This prevents hydration mismatches and unnecessary client-side overhead compared to useEffect-based detection.

App Router migration requires reclassifying components as Server or Client, moving data fetching from useEffect into Server Components, and removing unnecessary client-side state. This Skill provides migration guidance during code reviews to enforce correct component boundaries and data-fetching patterns.

No. useState and useEffect are Client-only hooks and cannot run in Server Components. Use them only in Client Components marked with 'use client'. For state in Server Components, use Server Actions or route handlers instead.

App Router best practices forbid explicit any types in TypeScript, requiring proper type safety across components. This Skill flags any usage violations during code reviews to maintain type safety and catch potential runtime errors early.