You are currently viewing documentation for the canary channel of Next.js.
use client
The use client
directive designates a component to be rendered on the client side and should be used when creating interactive user interfaces (UI) that require client-side JavaScript capabilities, such as state management, event handling, and access to browser APIs. This is a React feature.
Usage
To designate a component as a Client Component, add the use client
directive at the top of the file, before any imports:
app/components/counter.tsx
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
Nesting Client Components within Server Components
Combining Server and Client Components allows you to build applications that are both performant and interactive:
- Server Components: Use for static content, data fetching, and SEO-friendly elements.
- Client Components: Use for interactive elements that require state, effects, or browser APIs.
- Component composition: Nest Client Components within Server Components as needed for a clear separation of server and client logic.
In the following example:
Header
is a Server Component handling static content.Counter
is a Client Component enabling interactivity within the page.
app/page.tsx
import Header from './header'
import Counter from './counter' // This is a Client Component
export default function Page() {
return (
<div>
<Header />
<Counter />
</div>
)
}
Reference
See the React documentation for more information on use client
.
Was this helpful?