use client

use clientディレクティブは、コンポーネントをクライアントサイドでレンダリングするために指定するもので、状態管理、イベント処理、ブラウザAPIへのアクセスなど、クライアントサイドのJavaScriptの機能を必要とするインタラクティブなユーザーインターフェイス（UI）を作成するときに使用すべきです。これはReactの機能です。

使用方法

コンポーネントをClient Componentとして指定するには、ファイルの先頭にuse clientディレクティブを追加してください。インポートの前に追加します：

TypeScript

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>
  )
}

JavaScript

app/components/counter.js

'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>
  )
}

Server Component内にClient Componentをネストする

Server ComponentsとClient Componentsを組み合わせることにより、高パフォーマンスでインタラクティブなアプリケーションを構築できます：

1. Server Components: 静的コンテンツ、データ取得、SEOに優れた要素に使用します
2. Client Components: 状態、エフェクト、またはブラウザAPIが必要なインタラクティブな要素に使用します
3. コンポーネントの構成: サーバーとクライアントのロジックを明確に分離するために、必要に応じてServer Component内にClient Componentをネストします

以下の例では：

• Headerは、静的コンテンツを処理するServer Componentです
• Counterは、ページ内でインタラクティブ性を提供するClient Componentです

TypeScript

app/page.tsx

import Header from './header'
import Counter from './counter' // これはClient Componentです

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

JavaScript

app/page.js

import Header from './header'
import Counter from './counter' // これはClient Componentです

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

Reference

use clientに関する詳細は、Reactのドキュメントを参照してください。