【Next.js】Server Actions の利用方法

はじめに

この記事では、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>
}

参照

• Server Actions
• Server Actions and Mutations