Next.js Discord

Discord Forum

Should I convert form-related API route -> server action?

Unanswered
Griffon Nivernais posted this in #help-forum
Open in Discord
Griffon NivernaisOP
[Here's my code.](https://mystb.in/DamagesPennyNearly)

I made a site using pages router, it's super small at the moment so I can afford "big" rewrites at the moment, and wanted to try the app router. Migrating over isn't too bad, I did run into an issue when converting my home page (form sending data to API) to a server component (form using server actions). What stumps me is that I know you can call API routes explicitly server-side, but you can also convert them to server actions which I wanted to attempt, and realised I'm not sure how I'd be able to pass the necessary Request argument.

How do I approach this exactly?

2 Replies

Siberian Flycatcher
Hi 👋

With Server Actions, you can pass your payload as formData by setting values on form fields:

function Page() {

  async function action(formData) {
    "use server"
    const user = formData.get('user')
    const password = formData.get('password')
    // do something with payload
  }

  return (
    <form aciton={action}>
      <input name="user" type="text" />
      <input name="password" type="password" />
      <button>Submit</button>
    </form>
  )
}