Skip to main content

Client Components

Interactive components that run in the browser.

Official docs

Client Components — nextjs.org

When You Need 'use client'​

Add the directive at the top of a file when the component uses:

  • State (useState, useReducer)
  • Effects (useEffect)
  • Browser-only APIs (window, localStorage)
  • Event listeners
'use client';

import { useState } from 'react';

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? '❤️' : '🤍'}</button>;
}