Server Actions

// A whole file of actions — the usual shape
// features/problems/actions.ts
'use server'

export async function createProblem(formData: FormData) {
  const title = formData.get('title') as string
  await db.problem.create({ data: { title } })
  revalidatePath('/problems')
}

// Or inline in a server component
export default function Page() {
  async function del(formData: FormData) {
    'use server'
    await db.problem.delete({ where: { id: formData.get('id') } })
    revalidatePath('/problems')
  }
  return <form action={del}><input type="hidden" name="id" value={id} /></form>
}

// From a form — works with JavaScript disabled
<form action={createProblem}>
  <input name="title" required />
  <button>Create</button>
</form>

// From a client component
'use client'
import { createProblem } from '@/features/problems/actions'
<button onClick={() => startTransition(() => createProblem(fd))}>

// Actions must be async, and their arguments and return value must
// be serializable — the same rule as props crossing the boundary.

// Next compiles each action into a POST endpoint with a generated
// ID. Anyone can call it with any arguments — the form is not a gate.

// So EVERY action needs the same three checks an API route needs:
'use server'
export async function deleteProblem(id: string) {
  // 1. authenticate
  const user = await getCurrentUser()
  if (!user) throw new Error('Unauthorized')

  // 2. authorise — including ownership
  const problem = await db.problem.findUnique({ where: { id } })
  if (!problem || problem.authorId !== user.id) throw new Error('Forbidden')

  // 3. validate the input — it is user-controlled
  const parsed = z.string().uuid().safeParse(id)
  if (!parsed.success) throw new Error('Invalid id')

  await db.problem.delete({ where: { id } })
  revalidatePath('/problems')
}

// The failure mode to avoid: checking permission in the component
// that renders the button, and not in the action itself. Hiding the
// button hides nothing.

// Actions are POST-only and Next includes an Origin check, so basic
// CSRF is covered — but that is not a substitute for authorisation.

// Never trust a hidden input for identity:
<input type="hidden" name="userId" value={user.id} />   // forgeable
// Read the user from the session inside the action instead.

'use server'
export async function publish(id: string) {
  const problem = await db.problem.update({ where: { id }, data: { published: true } })

  revalidatePath('/problems')                      // the list
  revalidatePath(`/problems/${problem.slug}`)      // the detail
  revalidateTag('problems')                        // anything tagged

  redirect(`/problems/${problem.slug}`)            // throws — must be
}                                                  // outside try/catch

// Returning a result instead of throwing, so the form can show it:
export async function createProblem(prev, formData) {
  const parsed = Schema.safeParse(Object.fromEntries(formData))
  if (!parsed.success) {
    return { ok: false, errors: parsed.error.flatten().fieldErrors }
  }
  await db.problem.create({ data: parsed.data })
  revalidatePath('/problems')
  return { ok: true }
}
// A thrown error reaches error.tsx and loses the form; a returned
// error keeps the user's input on screen. For validation, return.

// Actions run SEQUENTIALLY — one at a time per client. Two rapid
// submissions queue rather than race, which is usually what you want
// and is worth knowing when something feels slow.

// Do not use an action for reads. It is a POST that cannot be cached
// or prefetched; a server component is the right tool for fetching.