Problem Statement
How do you mark a component as a Client Component in the App Router?
Explanation
You mark a component as a Client Component by adding the 'use client' string directive at the very top of the file before any imports, which tells Next.js that this component and its children should hydrate on the client and have access to browser APIs, hooks, and interactivity. Client Components are necessary for useState, useEffect, event handlers, browser-only APIs, or third-party libraries that rely on client-side features. The directive creates a boundary, and any components imported into a Client Component become Client Components too, so use it strategically at the component tree level where interactivity begins.
Practice Sets
This question appears in the following practice sets: