Using Forms in Next.js

Lee contrasts Pages Router forms, which use an onSubmit handler and a separate API route, with App Router forms. The example is a todo list where users can add and delete items, with loading and error states.

The page is an asynchronous Server Component that fetches todos, in this example from Vercel Postgres. A form’s action calls a server-side createTodo function, which validates input with Zod, inserts the todo, and calls revalidatePath so the page can show updated data.

A submit button uses React’s useFormStatus hook to show when a form is pending. Delete forms can be rendered for each todo and pass its ID in hidden form data. Lee notes that a Server Action can update cached data and return new UI in one network round trip.

The example labels inputs for screen readers and uses a polite live area to announce successful or failed actions. Lee demonstrates an error message after a two-second delay and explains why the button uses aria-disabled instead of disabled in this example.

For finer control than revalidating an entire path, Lee describes using revalidateTag with tagged data. He also mentions upcoming support for tagging data accessed through cache(), and names cookies, headers, optimistic UI, and redirects as other Server Action use cases.