Server / Client Components

なぜ学ぶか： Next.jsのコードで一番大事な概念がこれです。「なぜこのファイルの先頭に'use client'があるのか」が分かると、Next.jsのエラーの多くが意味を持ちます。まず全体の形を見てください。

まずはこの例を見てみましょう

// ===== page.tsx（何も書かない = サーバーで動く）=====
export default async function Page() {
  const posts = await fetchPosts();  // データを取って…
  return (
    <main>
      {posts.map((p) => <article key={p.id}>{p.title}</article>)}
      <LikeButton />  {/* クリックが必要な部分だけ、別部品に */}
    </main>
  );
}

// ===== like-button.tsx（ブラウザで動く部品）=====
"use client";   // ← この1行が「ブラウザ行き」の宣言

export function LikeButton() {
  const [likes, setLikes] = useState(0);  // useState はブラウザ専用
  return <button onClick={() => setLikes(likes + 1)}>♥ {likes}</button>;
}

ページ本体はサーバー（軽くて速い）、ボタンだけブラウザ（操作できる）。この分担が理想形です。

コード例

// ===== app/posts/page.tsx（サーバー: 既定）=====
// データを取得して表示するだけ → サーバーで完結
export default async function Page() {
  const posts = await fetchPosts();
  return (
    <main>
      <h1>投稿一覧</h1>
      {posts.map((p) => <article key={p.id}>{p.title}</article>)}
      <LikeButton /> {/* 対話が必要な部分だけ「ブラウザ」の部品に */}
    </main>
  );
}

// ===== like-button.tsx（ブラウザ）=====
"use client";
import { useState } from "react";

export function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(likes + 1)}>♥ {likes}</button>;
}

「サーバーの器に、ブラウザの島を埋め込む」構造。AIのコードを読むときは、まず各ファイルの先頭1行（'use client'の有無）を見ましょう。