Nextjs Anti Patterns

Quick Start

Anti-Pattern	Solution
useEffect for data fetch	Server Component async fetch
useEffect for browser detect	Direct detection in body
useState for server data	Server Component (no state)
Serial await	Promise.all() or Suspense
'use client' everywhere	Only for hooks/events

// ❌ 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

<!-- PROGRESSIVE DISCLOSURE GUIDELINES: - Keep this file ~50 lines total (max ~150 lines) - Use 1-2 code blocks only (recommend 1) - Keep description <200 chars for Level 1 efficiency - Move detailed docs to references/ for Level 3 loading - This is Level 2 - quick reference ONLY, not a manual -->