Client Components
Adding interactivity with Client Components.
Learning Goals
The Core Concept
While Server Components are great for initial loads and data fetching, Client Components are necessary when you need interactivity. This includes using event listeners (like onClick), React state (useState), or browser APIs. You define a Client Component by adding the '"use client"' directive at the very top of the file.
Visual guide
Next.js concept flow
A simple original diagram to connect the lesson idea with real project flow.
Code & Implementation
// app/counter.tsx
"use client"
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}Expected Output
Count: 0 [Increment Button]
Business Website
Hands-on practice task
The Challenge
Create a modern business site with interactive elements like a contact form and a sliding testimonial carousel.
Helpful Hints
- •Use Server Components for the layout and content. Create separate 'use client' components specifically for the form and carousel.
Quick Knowledge Check
Does 'use client' mean it only renders in the browser?
Continue Learning
Next steps after this lesson
Create a modern business site with interactive elements like a contact form and a sliding testimonial carousel.
Supercharge your career workflows!
Discover free online utilities to format data, build job applications, and automate your productivity routine with TechIdea.