Knowledge Maxxing← Back to topic library
Dev MaxxingIntermediateNext.js90 sec
Client Component
A Client Component in Next.js runs in the browser, allowing it to use interactivity features like state and event handlers that Server Components cannot.
Prerequisite: Server Component
What matters
Because its JavaScript is sent to and executed in the browser, a Client Component is the right choice specifically when a piece of UI needs to react to user interaction.
Example
A dropdown menu that opens and closes when clicked needs to be a Client Component, since it manages interactive state in the browser.
Common misconception
Marking every component as a Client Component 'just in case' is not a safe default; it unnecessarily increases the JavaScript sent to the browser.
Recall question
When specifically does a piece of UI need to be a Client Component rather than a Server Component?
Keywords and related concepts
Client ComponentNext.jsinteractivityserver component