Next.jsのServerActionsを使ってみた

投稿日: 2025年02月02日

学習振り返り

要約

Next.jsのServerActions機能を利用して、APIを介さずに出費管理アプリを作成した。
FrontとBackのコードを1ファイル内で書けるため、開発が迅速かつシンプルになるメリットがある。
汎用性や理解しやすさには欠けるが、「爆速でWebアプリを個人開発したい」場合に適した技術。

今回の記事で紹介する技術は、ShiftBのカリキュラムでは扱わないものです。
Next.jsはこんなこともできるんだ、くらいの感覚でみていただければと思います。

個人開発で、出費を管理するミニアプリを作りました。

DBのテーブルは３つのみ、
ページ数も少ないシンプルな仕様だったのですが、

今回はAPI（RouteHandler）を全く使わずに実装してみました。

例えば以下は、出費の金額を登録するページのコンポーネント（page.tsx）です。※ 一部抜粋

export default async function Page() {
  // 出費の登録処理をAPIを介さずに実行（= ServerActions機能）
  const createExpense = async (categoryId: string, formData: FormData) => {
    "use server";

    const amount = formData.get("amount");

    await prisma.expense.create({
      data: {
        amount: Number(amount),
        category: {
          connect: {
            id: categoryId,
          },
        },
      },
    });

    revalidatePath("/m/categories");
  };

  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-col gap-3">
        {categories.map((category) => (
          <CategoryCard
            key={category.id}
            category={category}
            onCreateExpense={createExpense}
          />
        ))}
      </div>
    </div>
  );
}