⚡ OpenNext ローカル検証デモ
🌐 CLIENT(ブラウザ)で実行

Client Component

"use client" を付けたファイルは ブラウザで動きます。クリックや入力などのインタラクション、useState / useEffectwindow / navigator などのブラウザ API は ここでしか使えません。

🌐 CLIENT(ブラウザ)で実行
count = 0

マウント時刻(ブラウザ): (ハイドレーション前)

navigator.userAgent: (取得中…)

🌐 CLIENT(ブラウザ)で実行

ボタンを押すと、ブラウザからサーバーの API(Route Handler)を呼び出します。

🔍 観察ポイント

  • ボタンを押すと、ブラウザの DevTools コンソールに ログが出ます(ターミナルには出ません)。
  • 「ページのソースを表示」しても、カウンターは初期値の状態でしか HTML に入っていません。動きは JavaScript が後から付けています (=ハイドレーション)。