Form Actions

// app/actions.ts
'use server'

export async function submitForm(
  prevState: { message: string },
  formData: FormData
) {
  const name = formData.get('name')
  if (!name) return { message: 'Name required' }
  // persist to database
  return { message: 'Saved' }
}

'use client'
import { useFormState } from 'react-dom'
import { submitForm } from '@/app/actions'

export function Form() {
  const [state, action] = useFormState(submitForm, {
    message: '',
  })
  return (
    <form action={action}>
      <input name="name" />
      <p>{state.message}</p>
      <button type="submit">Save</button>
    </form>
  )
}

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()
  return (
    <button disabled={pending}>
      {pending ? 'Saving...' : 'Save'}
    </button>
  )
}

import { z } from 'zod'

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
})

export async function submit(
  prev: { errors?: string[] },
  fd: FormData
) {
  const parsed = schema.safeParse(
    Object.fromEntries(fd)
  )
  if (!parsed.success) {
    return { errors: parsed.error.issues
      .map(i => i.message) }
  }
  return { errors: [] }
}