Client Components
React components that run in the browser and can use hooks, event handlers, and browser APIs like localStorage.
What are Client Components?
Client Components are React components that run in the browser and can use interactive features like useState, onClick handlers, and browser APIs.
They're the default in traditional React apps, but in Next.js 13+ with the App Router, you need to explicitly mark them with 'use client' at the top of the file.
Most builders use them for anything interactive: forms, buttons, modals, client-side data fetching. They pair with Server Components, which handle the static stuff and data fetching on the server.
The 'use client' directive tells Next.js to include that component in the JavaScript bundle sent to the browser. Keep them small and use Server Components for everything else to keep your app fast.
Good to Know
Run in the browser and can use React hooks like useState and useEffect
Need 'use client' directive at the top of the file in Next.js App Router
Can access browser APIs like localStorage, window, and document
Add to your JavaScript bundle size, so use them only when you need interactivity
Can import and render Server Components as children
How Vibe Coders Use Client Components
Building a form with validation that updates as users type
Adding a modal that opens when someone clicks a button
Creating a dropdown menu with hover states and animations
Implementing client-side search that filters results in real-time
Frequently Asked Questions
Related Terms
Reusable building blocks in software that handle specific functions and can be combined to build complete applications.
React components that run exclusively on the server, rendering HTML before it reaches the browser.
An open-source framework for creating videos programmatically using React code instead of traditional video editing software.
Next.js's file-system based routing that uses React Server Components for faster, more flexible page navigation and data fetching.
A React framework that handles routing, server rendering, and optimization out of the box so you can ship faster.
Join 0 others building with AI