Server側 / Client側 で動くコードを体感する
このデモは、Next.js の「サーバーで動くコード」と「ブラウザで動くコード」の 違いを目で見て確かめるためのものです。各ページを開いて、ターミナルのログ・ブラウザのコンソール・ページのソース（View Source）がどう変わるかを観察してください。
このトップページはサーバーで描画されました（サーバー時刻: 2026/6/12 13:38:08）。 ページを再読み込みするたびに、ターミナルにログが1行増えるのが確認できます。
Server Component
サーバーだけで動く。Node.jsの情報や秘密の値を扱える。HTMLに焼き込まれてブラウザに届く。
🌐 CLIENT（ブラウザ）で実行Client Component
ブラウザで動く。useState/useEffectやクリックなどのインタラクションを担当。
🖥️ SERVER で実行混在（Server↔Client の境界）
サーバーで計算した値を props で client に渡す／client の中に server を埋め込む。
🖥️ SERVER で実行Server Action
フォーム送信を "use server" 関数でサーバー処理。ボタンを押すとサーバーで実行される。
🖥️ SERVER で実行Supabase DB
Browser と Route Handler の両方から Supabase API に接続し、認証と CRUD を確認する。