Installation

pnpm install @rnpx/server-actions

validated form server actions for next.js with the new useFormState hook

Defining the action:

"use server";

import { redirect } from "next/navigation";
import { createServerAction } from "@rnpx/server-actions/server";
import { z } from "zod";

export const addEmail = createServerAction({
  schema: z.object({ email: z.string().email() }),
  action: async ({input: {email}}) => {
    await db.addEmail(email);
    return redirect(`thanks`);
  }
});

using the action:

"use client";

import { addEmail } from "./action";
import { useServerAction } from "@rnpx/server-actions/client";

export function AddEmailForm() {
  const { action, validationErrors } = useServerAction(addEmail);

  return (
    <form action={action}>
      <label>Add email</label>
      <input type="email"></input>
      <button type="submit" />
      {validationErrors.email && (
        <p className="text-red-500">{validationErrors.email}</p>
      )}
    </form>
  );
}

inspired by next-safe-action