Next.js App Router 使い分けガイド

最小の判断フロー

flowchart TD
    A[何を実現したい？] --> B{UIコンポーネント？}

    B -->|Yes| C{interactivity必要？<br/>state/handlers/browser API}
    C -->|Yes| D["Client Component<br/>(use client)"]
    C -->|No| E[Server Component]

    B -->|No<br/>関数/ロジック| F{クライアントから呼ぶ？}
    F -->|No| G["server-only関数<br/>(import server-only)"]
    F -->|Yes| H{HTTP API公開？}
    H -->|Yes| I[Route Handler]
    H -->|No| J["Server Function<br/>(use server)"]