Next.js Server Actions: Replacing Half My API Routes

Every form I built used to follow the same shape: client component, fetch to /api/thing, API route handler, response JSON, optimistic update. Five layers for a form submission. Server Actions collapse this to one function.

The Before

// app/contact/page.tsx (client)
'use client'
export default function Contact() {
  async function submit(formData) {
    await fetch('/api/contact', { method: 'POST', body: formData })
  }
  return <form action={submit}>...&lt;/form>
}
// plus app/api/contact/route.ts

Two files, one fetch, manual JSON serialization, manual error shape.

The After

// app/contact/page.tsx (server component)
async function submit(formData: FormData) {
  'use server'
  await saveContact(formData.get('email'))
  revalidatePath('/contact')
}
export default function Contact() {
  return <form action={submit}>...&lt;/form>
}

One file. No API route. Direct database call. Next.js handles the serialization, the fetch, the revalidation. Progressive enhancement works: the form submits even with JS disabled.

When Not To Use Them

Server Actions are for mutations driven by your own UI. If the endpoint needs to be public, called from mobile, or consumed by another service, keep the API route. Actions are an internal app convenience, not a public interface.

What Changed For Me

Roughly half my /api/ folder is gone. Contact forms, newsletter signups, admin mutations: all Server Actions now. The public API that powers the mobile app stays in /api/. The split is cleaner than trying to unify them.

See the Next.js Server Actions docs. If you are on App Router and still writing API routes for every form, try this for your next feature.