Contents
Next.js v14で導入するServer Actionsとは
Next.js v14では、サーバーサイドでの処理を直接呼び出す「Server Actions」が正式リリースされました。これは、従来のAPIルートやFetch APIに依存せずに、フォーム送信やボタンクリックなどユーザー操作をきっかけにサーバー側で非同期処理を行う仕組みです。Server Actionsは、クライアントサイドでのデータ操作ではなく、サーバーサイドで実行される関数であり、セキュリティ性やパフォーマンス面で優れた特徴を持っています。以下では、具体的な導入手順と実務での利用方法を解説します。
Server Actionsの有効化手順
Next.js v14ではServer Actionsがデフォルトで有効化されているため、特別な設定は不要です。ただし、プロジェクトのバージョンや構成に応じて確認が必要な場合があります。
next.config.jsでの設定方法
Next.js v13以降であれば、next.config.jsに以下の記述を追加するだけで有効化可能です。
|
1 2 3 4 5 6 7 |
/** @type {import('next').NextConfig} */ const nextConfig = { experimental: { serverActions: true, }, }; |
※注意:
- Next.js v14では
experimental.serverActionsを指定する必要がなく、デフォルトで有効です。 - プロジェクト構成に応じて、
app/ディレクトリまたはpages/ディレクトリを使用しているかを確認してください。
アプリケーション構成の確認
Server Actionsは Next.js App Router（app/ディレクトリ） で使用することが推奨されます。以下に主な構成ポイントを示します。
| 項目 | 内容 |
|---|---|
| ファイル配置 | サーバーアクション関数は app/actions/ ディレクトリに配置することが一般的です。 |
| 使用可能な場所 | Server ComponentsやClient Componentsから呼び出せます。 |
'use server'ディレクティブの使い方
Server Actionsの核心となるのは、「use server」というディレクティブです。このディレクティブを付与した関数は、クライアント側ではなくサーバー側で実行されます。
サーバーサイド関数の定義例
以下のように関数に use server を追加し、サーバーサイドで実行する処理を記述します。
|
1 2 3 4 5 6 7 8 9 |
// app/actions/exampleAction.ts "use server"; export async function exampleAction(data: { name: string }) { // データベース操作やファイル読み込みなど、非同期処理を行える console.log("サーバーサイドで実行されました:", data); return { status: "success", message: "処理が完了しました" }; } |
クライアントからの呼び出し方法
クライアント側（Reactコンポーネント）からServer Actionsを呼び出すには、useActionStateフックを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// app/page.tsx "use client"; import { useActionState } from "react"; import { exampleAction } from "@/actions/exampleAction"; export default function Page() { const [state, action] = useActionState(exampleAction, null); return ( <form action={action}> <input name="name" type="text" /> <button type="submit">送信</button> {state && <p>{state.message}</p>} </form> ); } |
フォーム送信時のServer Actions実装
Server Actionsは、特にフォームの送信処理に適しています。以下にステップバイステップで解説します。
HTMLフォームの基本構成
HTMLフォームには action 属性を設定し、サーバーアクション関数を指定します。
|
1 2 3 4 5 |
<form action={action}> <input name="name" type="text" /> <button type="submit">送信</button> </form> |
非同期処理対応の実装例
Server Actionsは非同期処理（async/await）をサポートしています。データベースアクセスやAPI呼び出しなどに活用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// app/actions/formSubmit.ts "use server"; import { db } from "@/utils/db"; // 仮想のデータベースモジュール export async function formSubmit(data: { name: string }) { try { await db.insert("users", data); // データベースに挿入する処理 return { status: "success", message: "ユーザーを追加しました" }; } catch (error) { console.error(error); return { status: "error", message: "データの保存に失敗しました" }; } } |
セキュリティベストプラクティス
Server Actionsでは、ユーザーからの入力データを信頼せず必ず検証する必要があります。以下の手法が推奨されます。
入力データの検証手法
- ZodやYupなどのバリデーションライブラリを使用して型チェックを行う
next/validateモジュールを活用し、クライアントサイドとサーバーサイドで共通の検証ルールを定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// app/actions/secureAction.ts "use server"; import { z } from "zod"; const schema = z.object({ name: z.string().min(2).max(50), }); export async function secureAction(data: { name: string }) { try { const parsedData = schema.parse(data); // 安全な処理を実行 } catch (error) { return { status: "error", message: "入力値が不正です" }; } } |
信頼性のないデータへの対応
- クライアント側で送信されるデータは常に疑う姿勢を持つ
- データベース操作やファイルアクセスなど、セキュリティリスクのある処理には、さらに検証を追加
注意: Server Actionsの関数内で
console.log()やalert()を使うと、クライアント側に情報が漏れる可能性があります。開発環境でのみ使用するようにしてください。
実装サンプルコードと環境構築
具体的な実装例を確認したい場合は、以下リンクからGitHubリポジトリをご覧ください。プロジェクト起動手順も記載しています。
Server Actions実装サンプルコードのGitHubリポジトリリンク
FAQとよくある質問
Server ActionsはAPIルートと何が違う？
Server Actionsは、クライアントサイドから直接呼び出せるサーバーサイド関数であり、APIルートとは別概念です。APIルートはHTTPリクエスト専用で、Server ActionsはReactコンポーネント内での処理に特化しています。
Server Actions内でデータベースアクセスをする場合の注意点は？
- 異常時のキャッチを必ず行う
- トランザクション管理やロック機構が必要な場合は別途実装
- パラメータ検証をサーバーサイドで再実施
Server Actions関数内でconsole.log()を使うとどうなる？
開発環境では問題ありませんが、本番環境ではログ出力がクライアント側に送信される可能性があります。セキュリティリスクがあるため、本番環境での使用は避けてください。
Server Actionsのデバッグとトラブルシューティング
Server Actionsのデバッグには以下の手順を実施してください。
-
開発モードで実行する
next devで起動し、コンソールに表示されるログを確認します。 -
エラーメッセージの取得
関数内でthrow new Error()を使用して意図的にエラーを発生させ、クライアント側でも確認可能にします。 -
ネットワーク監視ツールでの検証
Chrome DevToolsやPostmanでサーバーサイドのリクエスト/レスポンスフローを追跡します。
Server Actionsの最適化とパフォーマンス
Server Actionsは非同期処理を活用するため、以下の方法で効率化できます。
-
キャッシュ戦略
next/cacheモジュールを使用して、データ取得や検索処理にキャッシュを適用 -
並列処理の利用
Promise.all()を活用し、複数の非同期タスクを並行して実行 -
ロードバランサー設定
複数ノード環境ではリクエスト配分を最適化し、スケーラビリティを確保
Server ActionsとNext.js App Routerの関係性
Server ActionsはApp Routerと密接に関連していますが、以下の点に注意が必要です。
| ポイント | 説明 |
|---|---|
app/actions/ |
サーバーアクション関数を配置するディレクトリ |
use server |
Server ComponentsやClient Componentsから呼び出せるが、動作環境に注意 |
| ディレクトリ構成 | App Routerを使用しないプロジェクトではServer Actionsの利用が制限される |
まとめ
Next.js v14で導入されたServer Actionsは、従来のAPIルートよりも簡潔な実装と高いセキュリティ性を提供します。本記事で解説した設定手順や実装例を参考に、実際のプロジェクトで採用し、効率的な開発を実現してください。