Form Actions: Replacing API Routes for Mutations
Wire Server Actions directly to HTML form actions for zero-boilerplate form mutations with full revalidation.
The Traditional Pattern
In traditional Next.js applications, form submissions require a client component with an onSubmit handler that calls fetch() to POST data to an API route. This pattern works but requires writing and maintaining both the client-side fetch logic and the server-side route handler separately.
Server Actions Simplify Forms
With Server Actions, you replace the fetch call and the API route with a single function. The form element receives the Server Action as its action prop: <form action={serverAction}>. React intercepts the submission and calls the action with the form data automatically.
All lessons in this course
- Server Actions in React 19 and Next.js
- Form Actions: Replacing API Routes for Mutations
- useActionState and useFormStatus
- Progressive Enhancement with Server Actions