Manage your learning questions and answers
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.