Next.js Discord

Discord Forum

Client Side "Server Actions"

Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Open in Discord
Cuvier’s Dwarf CaimanOP
I was trying to handle form submission on client side (https://react.dev/reference/react-dom/components/form#handle-form-submission-on-the-client) according to these react docs but this doesn't seem to work on nextjs and only server actions are supported. Is there a way to make this work or an alternative? Or am I doing something wrong?

1 Reply

WebDevSayantan
This works as stated in the react docs. If you want to handle formData in the client side, you'll need to do it in a Client Component, as user interaction cannot be handled in the server.
Example code:

"use client"; // this is important
export default function Test() {
  function search(formData) {
    const query = formData.get("search");
    console.log(query);
  }
  return (
    <main>
      <form action={search}>
        <input type="text" name="search" id="search" />
        <button>Search</button>
      </form>
    </main>
  );
}


Hope this helps.