Form Architecture: GET Navigation (next/form) vs POST (useActionState)

The 30-Second Interview Answer

In modern Next.js form architecture: use next/form for GET search and navigation forms to automatically update the URL query parameters with client-side soft navigation and prefetching. For POST data mutations, use standard <form> coupled with React 19’s useActionState hook from "react" to manage pending state, returned errors, and optimistic updates without boilerplate.

Learning Objectives

Distinguish when to use next/form (GET) versus Server Actions with useActionState (POST).

Implement search and filter bars using next/form with automatic prefetching and URL sync.

Manage form mutation states, validation errors, and pending status using React 19 useActionState.

Display nested loading indicators with useFormStatus from react-dom.

Prerequisites & Background Knowledge

HTML Forms and GET/POST semanticsReact 19 HooksNext.js 15 next/form

Why Interviewers Care

Directly tests whether the candidate is familiar with Next.js 15’s new next/form component versus React 19 form hooks.

The Challenge

Contrast GET navigation forms using next/form with POST mutation forms using React 19 useActionState. Build a search form with next/form and a registration mutation form with useActionState.

Code Architecture & Implementation

1// app/components/SearchBar.tsx
2import Form from 'next/form';
3
4// next/form enhances HTML GET forms with:
5// 1. Client-side soft navigation (preserves client state, no hard reload)
6// 2. Automatic prefetching of results page
7// 3. Clean URL updates: /search?query=react
8export function SearchBar() {
9  return (
10    <Form action="/search" className="flex gap-2">
11      <input
12        name="query"
13        placeholder="Search documentation..."
14        className="border px-3 py-2 rounded"
15      />
16      <button type="submit" className="btn-primary">
17        Search
18      </button>
19    </Form>
20  );
21}

Architectural Explanation

Search filters and pagination should never be POST mutations; they should be GET requests so users can bookmark, share, and refresh URLs. Next.js 15 introduced next/form specifically for this, providing client-side router navigation without full page reloads. Conversely, mutations (creating/updating/deleting) must use HTTP POST. React 19’s useActionState binds a Server Action to component state, returning [state, formAction, isPending]. Combined with useFormStatus inside child submit buttons, it creates fully accessible, progressively enhanced forms.

Common Mistakes & Anti-Patterns

Importing useActionState from "react-dom" instead of "react".

Calling useFormStatus in the parent component containing the `<form>` element, causing it to return `pending: false` always.

Using POST Server Actions for search inputs, breaking browser URL sharing and back-button functionality.

Interview Follow-Up Traps

The interviewer asks: "Why should I use next/form instead of an onChange event with router.push()?" Explain that next/form supports progressive enhancement (works if JS is slow/fails), automatically handles encoding, and prefetches target routes.

Frequently Asked Questions

What is the signature of a Server Action passed to useActionState?

The action must accept previousState as its first argument: `async function action(prevState: State, formData: FormData): Promise<State>`.

Can next/form be used for file uploads?

No. File uploads mutate server state and should use standard POST forms with Server Actions.

Does useActionState work without JavaScript enabled?

Yes! When JavaScript is disabled, the form submits a native POST to the Server Action endpoint and renders the updated HTML.

Server Actions Fundamentals & RPC Execution Model Optimistic UI Updates with useOptimistic