From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Handling form submission with server action

Handling form submission with server action - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Handling form submission with server action

“

So, the interface is ready. Now let's handle the form submission and try to get the entered data. Right now, if I enter some data in the form, let me give Apple 21 and an image. Now as I click on Save, the form is submitted and the page is reloaded. Not only that, you can also see the query string formed in the URL. So this is the default behavior of the browser with forms. Now to enter the form data into the database, we need to handle the form submission and fetch the data on form submit. You may think of using an event handler like on submit. But if we try to use any event handler, then we have to make the interface render on the client side instead of server side. Let's practically check it. I will create a function handleSubmit and will just say console.log formSubmitted. And let me configure it on submit of the form. Let's save and check. And we get the error. Now we can make this a client component, but that is really not an ideal situation because we would be missing out on…

Contents