Client Components in Next.js

'use client' // This directive makes it a Client Component

import { useState, useEffect } from 'react'

interface ClientComponentProps {
  initialCount?: number
  serverData: string // Props from Server Component
}

export default function InteractiveCounter({ 
  initialCount = 0,
  serverData 
}: ClientComponentProps) {
  const [count, setCount] = useState(initialCount)
  const [isClient, setIsClient] = useState(false)

  // Can use React hooks
  useEffect(() => {
    setIsClient(true)
    
    // Can access browser APIs
    console.log(window.location.href)
    localStorage.setItem('count', count.toString())
  }, [count])

  // Can use event handlers
  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  return (
    <div>
      <p>Server Data: {serverData}</p>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
      
      {/* Conditional rendering for client-only features */}
      {isClient && (
        <p>Window width: {window.innerWidth}px</p>
      )}
    </div>
  )
}

// Composing Server and Client Components
// app/page.tsx (Server Component)
import ClientCounter from './ClientCounter'

export default async function Page() {
  const data = await fetchServerData()
  
  return (
    <div>
      <h1>Server Rendered Title</h1>
      {/* Pass server data to Client Component */}
      <ClientCounter serverData={data} />
    </div>
  )
}