---
title: "Forms and Mutations"
description: "Interactive forms and mutations allow users to send data back to the server to update application state, save records, or perform actions. Next.js provides a specialized <Form> component and server..."
last_updated: "2026-09-23T10:57:21.220999+00:00"
canonical_url: "https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/how-to-guides/forms-and-mutations"
---

## Overview

Interactive forms and mutations allow users to send data back to the server to update application state, save records, or perform actions. Next.js provides a specialized `<Form>` component and server-side processing mechanisms to make building these flows straightforward and efficient. 

When a user interacts with a form, Next.js handles route prefetching, data submission, and navigation seamlessly without needing complex client-side event handlers for standard routing forms.

---

## Building Interactive Forms

### ### Overview

Interactive forms allow users to submit data or navigate to new pages based on user input. The `<Form>` component extends standard HTML form behavior by adding automatic prefetching for navigation targets and supporting modern client-side features.

### Step-by-Step: Creating a Form

1. Import the Form component from the package:
   ```tsx
   import Form from 'next/form'
   ```
2. Define your form element and supply an `action` prop. The `action` can either be a navigation path (string) or a submission function (Server Action).
   ```tsx
   export default function Page() {
     return (
       <Form action="/search">
         <input name="query" placeholder="Search..." />
         <button type="submit">Submit</button>
       </Form>
     )
   }
   ```

> [!TIP]
> When a form's `action` is set to a path string (like `"/search"`), Next.js automatically prefetches the destination route as soon as the form becomes visible in the user's viewport.

---

## Processing Submissions with Server Actions

When you want to perform a mutation—such as writing to a database or updating records—pass a function to the `action` prop instead of a URL string. 

```tsx
async function action(formData: FormData) {
  'use server'
  const username = formData.get('username')
  // Process and save data on the server
}

export default function Page() {
  return (
    <Form action={action}>
      <input name="username" defaultValue="JaneDoe" />
      <button type="submit">Save Changes</button>
    </Form>
  )
}
```

---

## Key Concepts

* **Server Action:** An asynchronous function executed on the server that can be called from client-side components or form submissions.
* **Prefetching:** The background loading of route data before a user actually interacts with a form or link, resulting in instant navigation.
* **Submission Submitter:** The specific button or input element that triggered the form submission.

---

## Form Configuration Options

When configuring your `<Form>`, you can use the following props:

| Prop Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `action` | `string` or `function` | Required | Specifies the URL path to navigate to or the function to call on submit. |
| `prefetch` | `false` or `null` | `null` | Controls route prefetching behavior when `action` is a string. |
| `replace` | `boolean` | `false` | Replaces the current history state instead of pushing a new URL. |
| `scroll` | `boolean` | `true` | Controls default scroll behavior upon navigation. |

> [!WARNING]
> Passing `prefetch`, `replace`, or `scroll` to a `<Form>` whose `action` is a function (Server Action) has no effect, as these properties only apply to URL navigations.

---

## Tips and Best Practices

> [!NOTE]
> Unsupported HTML form attributes such as `method`, `encType`, and `target` are disallowed on the `<Form>` component to ensure proper client-side routing behavior.

> [!CAUTION]
> File inputs are only supported when your form `action` is a function (Server Action). If your form action is a string path, file inputs cannot be encoded into URL search parameters.

## Related

- [Data Fetching Mutations](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/core-concepts/data-fetching-mutations)
- [Error Handling Debugging](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/guide/troubleshooting/error-handling-debugging)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/8f4009b0-65bd-4480-9b00-e201f0914bb3/llms.txt) for all pages in this wiki.