---

name: nextjs-anti-patterns

IMPORTANT: Keep description on ONE line for Claude Code compatibility

prettier-ignore

description: Common Next.js anti-patterns: useEffect misuse (data fetch, browser detect), useState for server data, Pages Router patterns, serial await, over-using 'use client'. allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Next.js Anti-Patterns

Quick Start

Copy// ❌ WRONG
useEffect(() => {
  fetch('/api/posts').then(setPosts);
}, []);

// ✅ CORRECT
export default async function Posts() {
  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Reference Files

• useeffect-misuse.md - Browser detection, data fetch, URL detection anti-patterns
• useState-misuse.md - Server data, derived values
• pages-router-anti-patterns.md - getServerSideProps, getStaticProps, next/head
• performance-anti-patterns.md - Serial await, over-using 'use client'
• navigation-anti-patterns.md - window.location, useRouter in Server Components
• when-client-appropriate.md - When Client Components are correct

Notes

• Default to Server Components - add 'use client' only when needed
• Never use useEffect for data fetching - use async Server Components
• Last verified: 2025-01-11