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(() => {