nextjs-core

Next.js Core Patterns & Anti-patterns

---

TypeScript: NEVER Use any

// ❌ WRONG
function handleSubmit(e: any) { }
const data: any[] = [];

// ✅ CORRECT
function handleSubmit(e: React.FormEvent<HTMLFormElement>) { }
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { };
// Page props (Next.js 15+)
async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
}

---

Server vs Client Components

Need useState/useReducer/useEffect/Browser APIs/event handlers?
├── YES → 'use client' (at leaf — smallest possible boundary)
└── NO  → Server Component (default — better SEO, smaller bundle)

// ✅ CORRECT: Server wraps Client
// app/page.tsx (Server Component)
export default async function Page() {
  const data = await fetchData();           // server-side
  return <div><InteractiveButton /></div>;  // only button is client
}

// ✅ CORRECT: Server Component as children of Client
<Modal>
  <ServerComponent />   {/* Server passed as children prop */}
</Modal>

// ❌ WRONG: Client Component imports Server Component
'use client';
import { ServerComponent } from './server'; // breaks — pass as children instead

---

Anti-patterns

1. useEffect for Data Fetching

// ❌ WRONG: waterfall + no SSR + bad SEO
'use client';
export default function List() {
  const [items, setItems] = useState([]);
  useEffect(() => { fetch('/api/items').then(r=>r.json()).then(setItems); }, []);
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
}

// ✅ CORRECT: Server Component — fast, cached, SEO-friendly
export default async function List() {
  const items = await getItems();
  return <ul>{items.map(i => <li key={i.id}>{i.name}</li>)}</ul>;
}

2. Browser Detection Causing Hydration Mismatch

// ❌ WRONG: different value on server vs client → hydration error
const [isMobile, setIsMobile] = useState(
  typeof window !== 'undefined' && window.innerWidth < 768
);

// ✅ CORRECT: consistent initial state, detect after mount
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
  const check = () => setIsMobile(window.innerWidth < 768);
  check();
  window.addEventListener('resize', check);
  return () => window.removeEventListener('resize', check);
}, []);