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: Naukri-style job board

The Recruitment team building Naukri-style job board uses Client Components to add click handlers, video controls, and quiz timers in the browser. job seekers and recruiters never see the TypeScript files — they just get a fast, reliable job search, apply forms, and employer dashboards.

Production-style code

'use client';

import { useState } from 'react';

export function LessonCompleteButton({ lessonId }: { lessonId: string }) {
  const [done, setDone] = useState(false);
  return (
    <button type="button" onClick={() => setDone(true)} disabled={done}>
      {done ? 'Completed ✓' : 'Mark complete'}
    </button>
  );
}

What happens in production: In Naukri-style job board, getting Client Components right means job seekers and recruiters trust the job search, apply forms, and employer dashboards every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

'use client';

import { useState } from 'react';

export function MarkCompleteButton({ lessonId }: { lessonId: string }) {
  const [done, setDone] = useState(false);

  return (
    <button
      type="button"
      onClick={() => setDone(true)}
      disabled={done}
      aria-pressed={done}
    >
      {done ? 'Completed ✓' : 'Mark lesson complete'}
    </button>
  );
}

Line-by-line walkthrough

How it works (big picture)

• "use client" marks the boundary.
• useState remembers done between clicks.
• Server Components can import Client Components — not the reverse for children that need server data passed as props.

Do this on your computer

1. Create components/MarkCompleteButton.tsx with "use client"
2. Import it into a Server Component page
3. Click and confirm state toggles
4. Open React DevTools and find the component
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

"use client" = browser interactivity. Use for state, effects, and event handlers. Keep Client Components small — leaf nodes in the tree.

Common questions