Form Component

1
import Form from 'next/form';
2
import { submitForm, FormState } from './actions';
3

4
export default function ContactPage() {
5
  const [state, formAction] = useActionState(submitForm, initialState);
6

7
  return (
8
    <Form action={formAction}>
9
      <input
10
        name="email"
11
        type="email"
12
        aria-invalid={state.errors?.email ? 'true' : undefined}
13
      />
14

15
      {state.errors?.email && <p role="alert">{state.errors.email[0]}</p>}
16

17
      <SubmitButton />
18
    </Form>
19
  );
20
}

Demo

1. Contact Form: Complete form with field validation, error messages, and success state.
2. Search Form: Demonstrates prefetching - watch the URL update without full reload.
3. Newsletter Form: Inline feedback pattern for simple subscription forms.
4. Comparison: See the differences between Next.js Form and native HTML forms.

Key Features

• Prefetching: Loading UI and layouts are prefetched on hover
• Client Navigation: No full page reload, preserves client state
• Progressive Enhancement: Works without JavaScript
• Accessible: ARIA attributes for screen readers

Visual Summary

Pitfalls & Tips

• Validate on the server for authoritative results.
• Use useActionState to surface field-level errors.

Links

• Form Component Docs
• useActionState
• useFormStatus
• Server Actions