はじめに
この記事では、Server Actions の利用方法を記載します。
Server Actions はサーバー側で実行される非同期関数です。Next.js のアプリケーションでフォームの送信やデータの変更を処理するために Server Component、Client Component から呼び出すことができます。
開発環境
開発環境は以下の通りです。
- Windows 11
- Next.js 14.2.13
- React 18.3.1
- TypeScript 5.5.4
利用方法
"use server" ディレクティブで Server Actions を定義できます。"use server" ディレクティブの記述場所は2通りあります。
非同期関数の先頭
ひとつ目は、非同期関数の先頭です。こちらは Serer Component のみ利用可能です。
以下の例では、addTask という非同期関数内の先頭に "use server" を記載しています。
page.tsx
import { revalidatePath } from "next/cache";
// Simulated in-memory task storage
const tasks: string[] = [];
export default function Page() {
async function addTask(data: FormData) {
"use server";
const task = data.get("task");
if (task && typeof task === "string") {
tasks.push(task);
// Revalidate the page to reflect added tasks
revalidatePath("/");
}
}
return (
<div>
<form action={addTask}>
<label htmlFor="task">Enter Task</label>
<br />
<input id="task" name="task" type="text" required />
<button type="submit">Add</button>
</form>
<ul>
{tasks.map((task, index) => (
<li key={index}>{task}</li>
))}
</ul>
</div>
);
}
ファイルの先頭
ふたつ目は、ファイルの先頭です。こちらは Server Component、Client Component の両方で利用可能です。
action.ts
'use server'
export async function addTask() {}
page.tsx
'use client'
import { addTask } from '@/app/actions'
export function Page() {
return <form action={addTask}>...</form>
}