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'の有無）を見ましょう。