前提列挙
（React.js SPA世界に生きているので、Next.js世界を知りたい！！）

Server Actions

• Server Actionsが安定版になったのはNext.js v14から
• client componentでもserver componentでも呼び出せる
  • （てっきりserverのみで使えるのかと思った）
• Server Actionsをpropsとして渡せる
  • Server側で呼び出して、ClientにPropsで渡して使うとかできて良さそう
  • でもServer Actionsだと知らずに取り回しするのはよく無さそう

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

API Route

• pages/api/*で定義するとAPIエンドポイントとして扱われる
• 小さなAPIラムダ関数っぽい

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

AI回答メモ

Next.jsのApp RouterにおけるServer ActionsとAPI Routesの違いについて説明します。

Server Actions

• 目的: コンポーネント内でサーバーサイドのロジックを直接実行するために使用されます。
• 使用場所: Reactコンポーネント内で直接使用されます。
• 利点: コードの分離が少なく、コンポーネントとサーバーサイドロジックが密接に結びついています。

API Routes

• 目的: サーバーサイドのロジックをエンドポイントとして定義し、クライアントからのリクエストを処理するために使用されます。
• 使用場所: pages/apiディレクトリ内にファイルを作成して使用します。
• 利点: サーバーサイドロジックを明確に分離し、再利用可能なAPIエンドポイントを作成できます。

ex: Server Actions

// コンポーネント内で直接サーバーサイドのロジックを実行
export default function MyComponent() {
  async function handleAction() {
    const data = await fetchDataFromServer();
    // サーバーサイドのロジック
  }

  return (
    <button onClick={handleAction}>Fetch Data</button>
  );
}

ex: API Routes

// pages/api/data.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // サーバーサイドのロジック
    res.status(200).json({ data: 'some data' });
  } else {
    res.status(405).end(); // Method Not Allowed
  }
}

// コンポーネント内でAPIエンドポイントを呼び出す
export default function MyComponent() {
  async function fetchData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    // クライアントサイドのロジック
  }

  return (
    <button onClick={fetchData}>Fetch Data</button>
  );
}

このように、Server Actionsはコンポーネント内で直接サーバーサイドのロジックを実行するのに対し、API Routesはサーバーサイドのロジックをエンドポイントとして定義し、クライアントからのリクエストを処理します。