Components & Styling

Two kinds of components

Server components (default)

// runs on the server — can fetch and read DB\nasync function CourseList() {\n  const courses = await fetchCourses();\n  return <ul>{courses.map(c => <li key={c.id}>{c.title}</li>)}</ul>;\n}

Components are server components by default: they fetch data before the page is sent, which is fast and SEO-friendly.

Client components

"use client";\n\nimport { useState } from "react";\n\nexport default function Counter() {\n  const [count, setCount] = useState(0);\n  return <button onClick={() => setCount(count + 1)}>{count}</button>;\n}

Add "use client" when you need interactivity — state, events, browser APIs.

CSS in Next.js

// globals.css applies everywhere\n// each layout can import its own CSS module\nimport styles from "./card.module.css";\n\n<div className={styles.card}>…</div>

Which do I need?

Tip: Start with server components. Only add "use client" when you actually need browser interactivity.