Why client components handle interactivity in NextJS - See It in Action

Why Client Components Handle Interactivity

📖 Scenario: You are building a simple interactive button in a Next.js app. This button will count how many times it has been clicked. You want to understand why this button must be a client component to handle the clicks and update the count.

🎯 Goal: Create a Next.js client component that shows a button and a count. Each click on the button increases the count by one. This will demonstrate why client components handle interactivity.

📋 What You'll Learn

Create a React functional component named ClickCounter.

Use the useState hook to store the count.

Add a button that increments the count when clicked.

Mark the component as a client component using 'use client' directive.

💡 Why This Matters

🌍 Real World

Interactive buttons and UI elements are common in web apps for user input and feedback.

💼 Career

Understanding client components and interactivity is essential for building modern React and Next.js applications.

1

Create the basic component structure

Create a React functional component named ClickCounter that returns a div with the text Clicks: 0 inside.

NextJS

function ClickCounter() {
  // Your code here
}

Need a hint?

Start by writing a function named ClickCounter that returns a div with the text Clicks: 0.

2

Add state to track clicks

Inside the ClickCounter component, import and use the useState hook to create a state variable called count initialized to 0. Update the returned div to display the current count.

NextJS

import { useState } from 'react';

function ClickCounter() {
  // Your code here
}

Need a hint?

Use useState(0) to create count and setCount. Show {count} inside the div.

3

Add button to increment count

Add a button element inside the returned JSX of ClickCounter. Set its onClick handler to a function that calls setCount(count + 1). The button text should be Click me.

NextJS

import { useState } from 'react';

function ClickCounter() {
  const [count, setCount] = useState(0);
  return (
    
      {/* Your code here */}
    
  );
}

Need a hint?

Add a button with an onClick that increases count by 1.

4

Mark the component as a client component

Add the directive 'use client' as the first line in the file before any imports or code to mark ClickCounter as a client component.

NextJS

// Your code here
import { useState } from 'react';

function ClickCounter() {
  const [count, setCount] = useState(0);
  return (
    
      Clicks: {count}
       setCount(count + 1)}>Click me
    
  );
}

Need a hint?

Place 'use client'; at the very top of the file to enable client-side interactivity.