Next.jsのServerActionsを使ってみた

今回の記事で紹介する技術は、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>
  );
}

金額を入力して登録ボタンを押すと、createExpense関数が実行されますが、
関数内で直接prismaでDB操作を行なっています。

Next.js 13で追加された「ServerActions」という機能です。
関数内の先頭に、"use server";とおまじないをつけることで、
関数をサーバーサイドで実行させることができます。

今回初めて使いましたが、
結構たくさんのメリットを感じました。

• API(RouteHandler)を介さないため処理が早い

• フロントエンドとバックエンド間での型の共有が、何も意識せず勝手に行える

• 開発中もファイルの行き来がなく、１ファイル内でフロントもバックエンドも書けるので開発早い（AI補完もより効く）

• useStateやuseEffectもほとんど使わなくなるので、コードがシンプルになる

一方で、デメリットは

• Next.js特有の技術すぎて、汎用性がない（殆どの実案件はAPIを介して通信しているので、ShiftBの学習もそちらに合わせるようにしている）

• 何が起こっているのかわかりにくい（１ファイル内でサーバーサイドで動く部分とフロントエンドで動く部分が混在している）

• iOSアプリ版などを出す場合、基本Web版とAPIを共用するが、この作り方だとAPIが無いため実現できない

などなど、用途により向き不向きはありそうですが、
「とにかく爆速でWebアプリを個人開発したい」という時にはもってこいの技術だと思いました。