この記事はGemini-exp-1114で生成した内容をベースに使用しています。
ずんだもん「こんにちは！僕ずんだもんなのだ！今日はつむぎちゃんと一緒に、Next.js の API ルート と サーバーアクション の使い分けについて解説するのだ！」
つむぎ「春日部つむぎです！ずんだもんさん、よろしくお願いします！API ルートとサーバーアクション、名前は似てるけど、どう違うんですか？」
ずんだもん「良い質問なのだ！まずは API ルート から説明するのだ！API ルートは昔からある Next.js の機能で、クライアントから独立した API のエンドポイントを作れるのだ！データの取得や更新、認証処理など、サーバーサイドの処理全般を担える万能選手なのだ！」
API ルートの基本
-
pages/apiディレクトリにファイルを作成して API エンドポイントを定義します。 - ファイル名はエンドポイントのパスに対応します。例えば
pages/api/users.jsは/api/usersというエンドポイントになります。
つむぎ「なるほど、サーバー側の処理なら何でもお任せって感じですね！」
ずんだもん「その通りなのだ！例えば、pages/api/hello.js を作ると /api/hello というエンドポイントにアクセスした時に、データを送り返せるのだ！」
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from API Route!' });
}
つむぎ「このコードだと /api/hello にアクセスすると {"message": "Hello from API Route!"} という JSON データが返ってくるんですね！」
ずんだもん「さすがつむぎちゃん、理解が早いのだ！API ルートは汎用性が高い反面、クライアントサイドから呼び出すためには fetch などの API リクエストが必要になるのだ。ちょっと手間がかかるのだ。」
つむぎ「なるほど…もっと簡単にサーバー側の処理を実行できる方法はないんですか？」
ずんだもん「そこで登場するのがサーバーアクションなのだ！サーバーアクションは React コンポーネントの中から直接サーバーサイドの関数を呼び出せる、Next.js 13 で導入された新機能なのだ！」
サーバーアクションの特徴
Next.js 13 から導入された機能で、React コンポーネントから直接サーバーサイドの関数を呼び出せます。
fetch を使わずにサーバーと通信できるので、クライアントサイドのコードがシンプルになります。
つむぎ「コンポーネントの中から直接サーバーサイドの関数を実行できるんですか！？それは便利そうですね！」
ずんだもん「そうなのだ！use server ディレクティブを付けた関数を定義するだけで、サーバーアクションが作れるのだ！例えば、ボタンをクリックした時にサーバー側の処理を実行する例を見てみるのだ！」
// app/actions.js
'use server'; // サーバーサイドで実行されることを示す
export async function serverAction() {
// サーバーサイドの処理
return 'Hello from Server Action!';
}
// app/page.js
'use client'; // クライアントサイドのコンポーネントであることを示す
import { useState } from 'react';
import { serverAction } from './actions';
export default function Page() {
const [message, setMessage] = useState('');
const handleClick = async () => {
const result = await serverAction();
setMessage(result);
};
return (
<div>
<button onClick={handleClick}>サーバーアクションを実行！</button>
<p>{message}</p>
</div>
);
}
つむぎ「ServerAction 関数に use server って書いてあるのがポイントですね！これでサーバー側で実行されるってことですね！」
ずんだもん「ご明察！その通りなのだ！クライアント側では通常の関数と同じように呼び出すだけで、サーバー側の処理結果を受け取れるのだ！ fetch を使う必要がないからコードがシンプルになるのだ！」
サーバーアクションの注意点
use server ディレクティブを付けたファイル内では、useState などの React Hooks や、window オブジェクトなどのブラウザ特有の API は使用できません。
サーバーアクションは app ディレクトリ内でのみ使用可能です。
つむぎ「サーバーアクション、めっちゃ便利ですね！でも、API ルートとどう使い分ければいいんですか？」
ずんだもん「良い質問なのだ！使い分けのポイントは クライアントとの密結合度なのだ！」
つむぎ「クライアントとの密結合度？」
ずんだもん「サーバーアクションは、UIと密接に関連した処理、フォーム送信、データ更新など、単一のコンポーネントから呼び出される処理に適しているのだ。」
ずんだもん「API ルートは、複数のクライアントや外部サービスから利用される汎用的なAPI、認証処理、ファイル操作など、独立した API として公開したい処理に適しているのだ。」
つむぎ「なるほど！UI と密接に関わる処理はサーバーアクション、汎用的な API は API ルートってことですね！」
ずんだもん「そういうことなのだ！ちなみにサーバーアクションは React Server Componentsとの相性も抜群なのだ！サーバーでデータを取得して、そのままクライアントコンポーネントに渡すこともできるのだ！」
React Server Components との連携
サーバーアクションは React Server Components と組み合わせることで、より効果的にサーバーサイドの処理を活用できます。サーバーで取得したデータを直接クライアントコンポーネントに渡せるので、パフォーマンスの向上やコードの簡潔化が期待できます。
つむぎ「使い分けがわかってスッキリしました！ずんだもんさん、ありがとうございました！」
ずんだもん「どういたしましてなのだ！サーバーアクションと API ルートを使いこなして、素敵な Next.js アプリを作るのだ！」
私は普段、WEBサービスやモバイルアプリの自社開発・運営を行っております。
特にAI駆動の開発を採用して、個人規模で高品質かつ高速なプロダクト開発ができるように、日々活動をしています。
よろしければXアカウントのフォローをお願い致します。