React Components in Next.js — Complete Guide
React Components in Next.js — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of Next.js Tutorial on Toolliyo Academy.
On this page
Next.js Tutorial (LearnHub) · Lesson 6 of 100
React Components in Next.js
Beginner → Intermediate → Advanced → Professional
Beginner · 1 — Foundations · ~12 min read · Module 1: Next.js Foundations
Introduction
This lesson is part of the beginner section. We explain React Components in Next.js slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. Components are reusable functions that return JSX. In LearnHub you split CourseCard, LessonList, and ProgressBar into separate files and import them into pages. Without components, one giant page.tsx becomes impossible to read. Teams review and test small pieces independently.
React Components in Next.js is setup knowledge. Without it, LearnHub will not run. Spend time here until npm run dev works without errors.
When will you use this?
You need this before writing any Next.js code — same as installing Node.js before opening a project.
- Every React/Next.js job expects you to run npx create-next-app and npm run dev on day one.
- Interviewers often ask you to explain the App Router folder structure and Server vs Client Components.
Real-world: Swiggy-style delivery tracker
The Food tech team building Swiggy-style delivery tracker uses React Components in Next.js to split course cards, lesson lists, and buttons into reusable pieces. customers and riders never see the TypeScript files — they just get a fast, reliable live order map and status updates.
Production-style code
// components/CourseCard.tsx
type Course = { id: string; title: string; lessonCount: number };
export function CourseCard({ course }: { course: Course }) {
return (
<article className="border rounded p-4">
<h2>{course.title}</h2>
<p>{course.lessonCount} lessons</p>
</article>
);
}
// app/courses/page.tsx
import { CourseCard } from '@/components/CourseCard';
export default function CoursesPage() {
const courses = [
{ id: '1', title: 'Next.js Fundamentals', lessonCount: 24 }
];
return (
<main>
{courses.map((c) => <CourseCard key={c.id} course={c} />)}
</main>
);
}What happens in production: In Swiggy-style delivery tracker, getting React Components in Next.js right means customers and riders trust the live order map and status updates every day.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
// components/CourseCard.tsx
type Course = { id: string; title: string; lessonCount: number };
export function CourseCard({ course }: { course: Course }) {
return (
<article className="border rounded p-4">
<h2>{course.title}</h2>
<p>{course.lessonCount} lessons</p>
</article>
);
}
// app/courses/page.tsx
import { CourseCard } from '@/components/CourseCard';
export default function CoursesPage() {
const courses = [
{ id: '1', title: 'Next.js Fundamentals', lessonCount: 24 }
];
return (
<main>
{courses.map((c) => <CourseCard key={c.id} course={c} />)}
</main>
);
}Line-by-line walkthrough
| Code | What it means |
|---|---|
// components/CourseCard.tsx | Comment — notes for humans; the compiler ignores it. |
type Course = { id: string; title: string; lessonCount: number }; | Part of the React Components in Next.js example — read it together with the lines before and after. |
export function CourseCard({ course }: { course: Course }) { | Named export — reusable function or component. |
return ( | Returns JSX — what the user sees in the browser. |
<article className="border rounded p-4"> | Part of the React Components in Next.js example — read it together with the lines before and after. |
<h2>{course.title}</h2> | Part of the React Components in Next.js example — read it together with the lines before and after. |
<p>{course.lessonCount} lessons</p> | Part of the React Components in Next.js example — read it together with the lines before and after. |
</article> | Part of the React Components in Next.js example — read it together with the lines before and after. |
); | Part of the React Components in Next.js example — read it together with the lines before and after. |
} | Closes a block started by { above. |
// app/courses/page.tsx | Comment — notes for humans; the compiler ignores it. |
import { CourseCard } from '@/components/CourseCard'; | Imports a module so you can use its exports in this file. |
export default function CoursesPage() { | Default export — the main page or component this file provides to Next.js. |
const courses = [ | Part of the React Components in Next.js example — read it together with the lines before and after. |
How it works (big picture)
- CourseCard receives props and renders one card.
- The page maps data to many cards.
- @/ alias points to project root from tsconfig paths.
Do this on your computer
- Create components/CourseCard.tsx
- Import it in app/courses/page.tsx
- Pass different title props for two courses
- Extract a LessonRow component in the next exercise
- Read the real-world section and name which part of LearnHub uses this topic.
- Run the example locally with npm run dev and confirm the same behavior.
- Change one value in the example (route, text, or course id) and predict what will happen before you save.
Experiments — try changing this
- Change a string or route in the example and save — watch the browser update.
- Break the code on purpose (remove a bracket), read the error overlay, then fix it.
Remember
Split UI into small components. Pages compose components with props. Use @/ for clean imports.
Common questions
components/ vs app/?
components/ has no URL — app/ files define routes.
How long should I spend on React Components in Next.js?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new concept; setup lessons may take one afternoon.
What if I get stuck on React Components in Next.js?
Re-read the line-by-line walkthrough, check the terminal and browser overlay for errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is React Components in Next.js used in real jobs?
See the real-world section above — the same pattern appears in LMS, e-commerce, SaaS, and dashboards. Interviewers ask you to explain it using one concrete example.