mediumFrontend

How do you handle forms with Server Actions in Next.js (progressive enhancement)?

Q: How do you handle forms with Server Actions in Next.js (progressive enhancement)?

**TL;DR.** Pass a Server Action to a <form action={...}> ; it receives FormData and runs on the server. Because it works **without client JS**, forms are **progressively enhanced** — they submit even before hydration — and you pair it with useActionState for pending/error UI. <form action> FormData submit (JS or not) server action <text class='

1.2k views

Understand the problem

Wiring a form action to a server function.

nextjsformsserver-actionsprogressive-enhancement

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Form + useActionState for errors/pending

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

export function PostForm() {
  const [state, formAction, pending] = useActionState(createPost, { error: null });
  return (
    <form action={formAction}>
      <input name="title" required />
      {state.error && <p>{state.error}</p>}
      <button disabled={pending}>{pending ? 'Saving…' : 'Save'}</button>
    </form>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the route segment config in Next.js (dynamic, revalidate, runtime)?

What is the difference between Server Components and Client Components in Next.js?