Next.js コンポーネントの種類

ブラウザ          Next.js サーバー
   |                    |
   | リクエスト  →      |
   |              コンポーネントを実行
   |              ↓
   |              HTML を生成
   | ← HTML を受け取る  |

// app/users/page.tsx
// "use client" がない → Server Component

import { createClient } from '@/lib/supabase/server'

export default async function UsersPage() {
  const supabase = createClient()
  const { data: users } = await supabase.from('users').select('*')
  // サーバー上で直接 DB アクセス。ブラウザには結果の HTML だけ届く

  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

ブラウザ          Next.js サーバー
   |                    |
   | リクエスト  →      |
   |              HTML を生成（初回）
   | ← HTML を受け取る |
   |                    |
   | JS バンドルも受け取る
   |  ↓
   | ブラウザ上で React が動く（Hydration）
   | → useState / onClick が使えるようになる

"use client"

import { useState } from 'react'

export default function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false)

  const handleLike = async () => {
    setLiked(true)
    // Supabase へは API Route 経由で呼び出す（直接アクセスしない）
    await fetch('/api/likes', {
      method: 'POST',
      body: JSON.stringify({ postId }),
    })
  }

  return (
    <button onClick={handleLike}>
      {liked ? '❤️ いいね済み' : '🤍 いいねする'}
    </button>
  )
}

コンポーネントを作るとき
        │
        ▼
useState / useEffect を使う？
イベントハンドラ（onClick 等）を使う？
ブラウザ API を使う？
        │
   YES  │  NO
        │
        ▼          ▼
  Client         DB アクセスや
  Component      秘密鍵を使う？
                    │
               YES  │  NO
                    │
                    ▼          ▼
              Server         どちらでも OK
              Component    → Server を選ぶ（デフォルト）

// C 案のイメージ（検索を Server 側で処理）
export default async function UsersPage({
  searchParams
}: {
  searchParams: { q?: string }
}) {
  const { data: users } = await supabase
    .from('users')
    .ilike('name', `%${searchParams.q ?? ''}%`)

  return (
    <>
      <SearchBox />        {/* Client Component（入力欄）*/}
      {users?.map(user => (
        <UserCard key={user.id} user={user}>
          <FollowButton userId={user.id} /> {/* Client Component */}
        </UserCard>
      ))}
    </>
  )
}

// ❌ 悪い例
"use client"
import HeavyDataTable from './HeavyDataTable' // Server Component のつもり

export default function Modal() {
  const [open, setOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setOpen(!open)}>開く</button>
      {open && <HeavyDataTable />} {/* Client として扱われてしまう！ */}
    </div>
  )
}

// ✅ 良い例：children として渡す

// components/Modal.tsx（Client Component）
"use client"
export default function Modal({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setOpen(!open)}>開く</button>
      {open && children}
    </div>
  )
}

// app/posts/page.tsx（Server Component）
import Modal from '@/components/Modal'
import HeavyDataTable from '@/components/HeavyDataTable'

export default function Page() {
  return (
    <Modal>
      <HeavyDataTable /> {/* Server Component を children として渡す */}
    </Modal>
  )
}

Page（Server）
└── Modal（Client）
      └── children = HeavyDataTable（Server）✅

"use client"
// このファイルで import されたコンポーネントはすべて Client 扱いになる
import ComponentA from './ComponentA' // → Client 扱いになる

// ❌ 内部で useState を使うライブラリを Server Component で使うとエラー
import { Toaster } from 'react-hot-toast'

// ✅ ラッパーを作る
// components/ToasterWrapper.tsx
"use client"
import { Toaster } from 'react-hot-toast'
export default function ToasterWrapper() {
  return <Toaster />
}

// ❌ 関数は渡せない（シリアライズ不可）
return <Button onClick={() => console.log('hi')} />

// ✅ 文字列・数値・配列・オブジェクトは OK
return <Button label="クリック" count={5} />

❌ よくある誤った設計
app/page.tsx
└── "use client" ← ページ全体を Client にしてしまう
    ├── Header
    ├── DataTable（本当は Server でよい）
    └── LikeButton（これだけ Client が必要）

✅ 正しい設計
app/page.tsx（Server）
├── Header（Server）
├── DataTable（Server・DB アクセス）
└── LikeButton（Client・必要な部分だけ）