What are client components in Next.js?

Next.jsMiddle~2 min read

Client Components in Next.js are React components that run in the user's browser and handle UI interactivity.

In short: anything that reacts to a user's actions is built with client components.

Short definition (for an interview)

A client component is a component that:

renders and runs in the browser
supports state, effects, and event handlers
is sent to the user as JavaScript
is explicitly marked with the 'use client' directive

How to declare a client component

tsx

'use client'

import { useState } from 'react'

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

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

The 'use client' line is required It must be the first line of the file.

What client components CAN do

useState, useEffect, useReducer, useContext
event handlers (onClick, onSubmit, onChange)
access window, document, localStorage
work with browser APIs
dynamically update the UI without a reload

What client components CANNOT do (or aren't allowed to)

work with a database directly
use server secrets
access the file system
import server components

Why? Because their code is sent to the browser and must be safe.

When to use client components

Use a client component if at least one of these conditions applies:

buttons, clicks, forms
modal windows
dropdowns, tabs, accordions
state management
animations
useEffect

If there is no interactivity - a client component is not needed.

Interaction with server components

An important rule:

A client component cannot import a server component

This is not allowed:

tsx

'use client'
import ServerComponent from './ServerComponent'

This is allowed:

tsx

// Server Component
import ClientComponent from './ClientComponent'

Why it's built this way:

server code must not end up in the browser
Next.js strictly enforces the server / client boundary

A common beginner mistake

Making the entire UI a client component:

tsx

'use client'
export default function Page() {
  return <BigStaticLayout />
}

The right approach:

keep the page as a server component
move the interactive pieces into client components

Quick comparison (to reinforce)

Client component	Server component
Runs in the browser	Runs on the server
Has interactivity	No interactivity
JS is sent	JS is not sent
Needs `'use client'`	Default
Uses hooks	Hooks not allowed

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.