How to Use Server Action in Form in Next.js

In Next.js, you can use server actions by defining an async function with the use server directive and passing it directly to the form element's action attribute. This lets the form submit data to the server without client-side JavaScript, simplifying server-side form handling.

Syntax

To use a server action in a Next.js form, define an async function with the use server directive. Then, assign this function to the action attribute of the form element.

• async function: Handles the form data on the server.
• use server: Marks the function to run on the server.
• form action: Points to the server action function.

tsx

export const action = async (formData: FormData) => {
  'use server'
  const name = formData.get('name')?.toString() || ''
  // process data here
  return { message: `Hello, ${name}!` }
}

export default function MyForm() {
  return (
    <form action={action}>
      <input name="name" type="text" placeholder="Your name" required />
      <button type="submit">Submit</button>
    </form>
  )
}

Example

This example shows a simple form that sends a name to a server action. The server action receives the form data, processes it, and returns a greeting message. The form submits without client-side JavaScript, and the server handles the logic.

tsx

export const action = async (formData: FormData) => {
  'use server'
  const name = formData.get('name')?.toString() || 'Guest'
  return { message: `Hello, ${name}!` }
}

export default function GreetingForm() {
  return (
    <form action={action}>
      <input name="name" type="text" placeholder="Enter your name" required />
      <button type="submit">Greet Me</button>
    </form>
  )
}

Output

User sees a form with a text input and a button. After submitting a name, the page shows "Hello, [name]!" below the form.

Common Pitfalls

Common mistakes when using server actions in Next.js forms include:

• Not adding the 'use server' directive inside the action function, so it runs on the client instead of the server.
• Passing a normal function instead of an async function to the form action.
• Trying to use client-side state or hooks inside the server action function.
• Not handling the FormData correctly, such as forgetting to call formData.get() to extract values.

Example of wrong and right usage:

tsx

// Wrong: Missing 'use server' directive
export const action = (formData: FormData) => {
  const name = formData.get('name')?.toString() || ''
  return { message: `Hello, ${name}!` }
}

// Right: Async function with 'use server'
export const action = async (formData: FormData) => {
  'use server'
  const name = formData.get('name')?.toString() || ''
  return { message: `Hello, ${name}!` }
}

Quick Reference

Tips for using server actions in Next.js forms:

• Always mark server action functions with 'use server'.
• Use async functions to handle form data.
• Pass the server action function directly to the form element's action attribute.
• Do not use client-side hooks inside server actions.
• Use FormData.get() to read form inputs.

Key Takeaways

Use async functions with the 'use server' directive for server actions in Next.js forms.

Assign the server action function directly to the form's action attribute for server-side handling.

Avoid client-side hooks or state inside server action functions.

Extract form data using FormData methods inside the server action.

Server actions simplify form handling by running logic on the server without extra client code.