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

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

1. Create components/CourseCard.tsx
2. Import it in app/courses/page.tsx
3. Pass different title props for two courses
4. Extract a LessonRow component in the next exercise
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. 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