Manage your learning questions and answers
Use next/image for automatic optimization, sizing, and lazy loading.
import Image from "next/image";
<Image src="/banner.png" alt="banner" width={800} height={320} />;layout.tsx wraps route segments to provide shared UI (e.g., nav). page.tsx renders the actual page content for that route.
Use useEffect plus fetch (or a data library). In the App Router, prefer Server Components for data when possible.
useEffect(() => {
fetch("/api/data")
.then((r) => r.json())
.then(setData);
}, []);useMemo caches expensive computations between renders. Only use it for actual cost or stable references.
const total = useMemo(() => items.reduce((s, n) => s + n, 0), [items]);Use the Link component to avoid full page reloads and keep client-side transitions.
import Link from "next/link";
<Link href="/courses">Courses</Link>;Use a Client Component when you need browser-only APIs (local state, effects, event handlers). Otherwise, prefer Server Components for performance.
Return a function from useEffect to clean subscriptions/timers. React calls it before the effect re-runs or during unmount.
useEffect(() => {
const id = setInterval(() => console.log("tick"), 1000);
return () => clearInterval(id);
}, []);Use bracketed folders like app/courses/[id]/page.tsx. Next.js matches the segment and passes params to the page component.
import { notFound } from "next/navigation";
export default function CoursePage({ params }: { params: { id: string } }) {
if (!params.id) return notFound();
return <main>Course {params.id}</main>;
}Place a page.tsx file under a route folder (e.g., app/about/page.tsx). The folder path defines the route.
export default function AboutPage() {
return <main>About</main>;
}useState triggers a re-render when the state changes and is ideal for UI state. useRef stores a mutable value that persists across renders without causing a re-render; it’s ideal for DOM refs and instance variables.