Next.js App Router Client/Server Boundary

Goal / 目的

• App Router の Server Component でクライアント専用APIを誤って使うミスを減らす。

Non-goals / 扱わないこと

• 画面設計やUI/UXの是非。
• App Router 以外のフレームワーク構成。
• 非同期データ取得の最適化全般（別スキルの対象）。

False-positive guards / 抑制条件

• ファイル先頭に use client が明示されている場合は指摘しない。
• コメントで意図的な回避策が明記されている場合は慎重に扱う。

Rule / ルール

• Server Component で useState / useEffect / useLayoutEffect を使わない。
• Server Component で window / document / localStorage / sessionStorage を参照しない。

Evidence / 根拠の取り方

• 差分内にクライアント専用APIが直接登場していることを示す。
• use client の有無を併記し、境界違反である根拠を示す。

Heuristics / 判定の手がかり

• use client のないファイルで React Hooks や DOM API を使っている。
• window 依存の処理が Server Component に残っている。

Actions / 改善案

• use client が必要な場合は、対象コンポーネントを分割してクライアント側へ移す。
• DOM API が必要な処理をクライアント専用の子コンポーネントに閉じ込める。

Output / 出力

• Finding: / Evidence: / Impact: / Fix: を含む短いメッセージにする。

評価指標（Evaluation）

• 合格基準: 境界違反が差分に紐づき、根拠と最小修正が説明されている。
• 不合格基準: 差分と無関係な指摘、根拠のない断定、抑制条件の無視。

人間に返す条件（Human Handoff）

• 設計意図が不明で解釈が分かれる場合は質問として返す。
• 大規模なコンポーネント分割が必要な場合は人間レビューへ返す。