Client Components patterns in Next.js App Router
View on GitHubplugins/aai-stack-nextjs/skills/nextjs-client-components/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/the-answerai/alphaagent-team/blob/main/plugins/aai-stack-nextjs/skills/nextjs-client-components/SKILL.md -a claude-code --skill nextjs-client-componentsInstallation paths:
.claude/skills/nextjs-client-components/# Next.js Client Components Skill
Patterns for using Client Components in Next.js App Router.
## Declaring Client Components
### The 'use client' Directive
```tsx
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
)
}
```
### Boundary Behavior
```tsx
'use client'
// Everything imported into a client component becomes client code
import { Button } from './button' // Also becomes client
import { formatDate } from './utils' // Also becomes client
export function MyComponent() {
return <Button>{formatDate(new Date())}</Button>
}
```
## When to Use Client Components
### Interactive UI
```tsx
'use client'
import { useState } from 'react'
export function Accordion({ items }: { items: AccordionItem[] }) {
const [openIndex, setOpenIndex] = useState<number | null>(null)
return (
<div>
{items.map((item, index) => (
<div key={index}>
<button onClick={() => setOpenIndex(
openIndex === index ? null : index
)}>
{item.title}
</button>
{openIndex === index && <div>{item.content}</div>}
</div>
))}
</div>
)
}
```
### Event Handlers
```tsx
'use client'
export function SearchInput({ onSearch }: { onSearch: (q: string) => void }) {
const [query, setQuery] = useState('')
const handleSubmit = (e: FormEvent) => {
e.preventDefault()
onSearch(query)
}
return (
<form onSubmit={handleSubmit}>
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
<button type="submit">Search</button>
</form>
)
}
```
### Browser APIs
```tsx
'use client'
import { useEffect, useState } from 'react'
export function WindowSize() {
const [size, setSize] = useState({ width: 0, height: 0 })
useEffect(() => {