Badge には use client を書いていません。この Panel から使うと、Badge のコードはブラウザに送られますか。
components/Panel.tsx
Browserで実行
'use client' Buildで実行
import { useState } from 'react'Buildで実行
import { Badge } from './Badge' Browserで実行
export function Panel() {Browserで実行
const [n, setN] = useState(0)Browserで実行
return <button onClick={() => setN(n + 1)}><Badge n={n} /></button>Browserで実行
}出典nextjs.org/docs/app/api-reference/directives/use-clientnextjs.org/docs/app/getting-started/server-and-client-components