What are Client Components in Next.js? | Next.js Interview Questions

What You'll Learn

When to use client components
"use client" directive
Best practices

Client Components

code.txtTSX

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

When to Use Client Components

Need	Component Type
useState, useEffect	Client
onClick, onChange	Client
Browser APIs	Client
Static content	Server
Data fetching	Server
Backend resources	Server

Composition Pattern

code.txtTSX

// Server Component (default)
import ClientButton from './ClientButton';

export default async function Page() {
  const data = await fetchData(); // Server-side

  return (
    <div>
      <h1>{data.title}</h1>
      <ClientButton /> {/* Interactive part */}
    </div>
  );
}

// ClientButton.tsx
'use client';
export default function ClientButton() {
  return <button onClick={() => alert('Hi')}>Click</button>;
}

Boundary Rules

code.txtTSX

'use client';

// Everything imported here becomes client
import ServerComponent from './ServerComponent'; // Now client!

// Pass server components as children instead
export default function ClientWrapper({ children }) {
  return <div onClick={...}>{children}</div>;
}