サーバー側で実行される非同期関数をクライアントから直接呼べる仕組み。フォーム送信やミューテーション処理に使う。
// app/actions.ts
'use server'; // このファイルの関数はすべてServer Action
import { revalidatePath } from 'next/cache';
export async function createPost(formData: FormData) {
const title = formData.get('title') as string;
const content = formData.get('content') as string;
// サーバー側でDBに直接書き込み
await db.posts.create({ title, content });
// キャッシュを無効化して再取得
revalidatePath('/blog');
}
// app/new-post/page.tsx で使う
import { createPost } from '../actions';
export default function NewPostPage() {
return (
<form action={createPost}>
<input name="title" placeholder="タイトル" />
<textarea name="content" />
<button type="submit">投稿する</button>
</form>
);
}Server Actionsはフォームのaction属性に直接渡せるため、JavaScriptが無効な環境（プログレッシブエンハンスメント）でも動作する。