Refactor POST Handler for Creating a Customer into a Next.js Server Action
We can start utilizing server actions by refactoring our POST handler for creating a customer into a server action.
You will need to add the serverActions: true flag to your next config under the experimental settings.
In this example we will refactor a form that utilizes react-query and react-hook-form that sends a POST request to an API route that we have set up to add customers to.
Server Actions make it easy to grab form data and submit data directly in that action on the server.
Instructor: [0:00] Now we can make use of an experimental feature in the app router called Server Actions. To get started with Server Actions, we need to come into our next config and we need to add the flag Server Actions and set it to true.
[0:18] If we save that, you'll get this little notice down here that says you have enabled experimental features and it adds Server Actions there. Now, let's come into our customer's API route and all we have left here is our post request.
[0:39] We can copy this. Now, let's create an actions.ts file in the root of our app router. Here, we need to give it the directive of useServer. Then we can create a function and we're just going to call this one Create Customer.
[0:58] We can just paste the logic we copied and then make sure you get all your imports. If for some reason your import isn't being recognized, you may have to restart VS Code. I just had to restart VS Code so that it would be able to find the path to models in the user server.
[1:19] Now, we can get rid of all of our next responses and we can just throw new errors for now. And so, now, we're not getting our request anymore but we know that we have this on a form so we can actually pass this form data. Let's bring in our form data.
[1:40] We'll say form data.get and here, we'll just get the name and then we'll copy this and we'll get the email. This will be name and email. For now, we can just set this as a string.
[2:05] In the future, we will add validation using Zod. Now, let's come into our route and we can get rid of our route handler completely. We'll no longer have our customer's route handler. Let's delete.
[2:23] Now, we can save this and we have our new action created. Now, we need to make sure we replace where we were making that POST request to the Customer route with our new action.
[2:34] Let's come into our component and that would be in our Customer form so add customer. For now, we're just going to remove all of our React Hook Form and React Query code.
[2:47] We can get rid of all this. We can get rid of our action here. Then in our form, we can just pass that pad Customer Action, which we will get from our actions.
[3:07] We need to change this onsubmit() now to be an action. Now, we need to remove the rest of the places we are using React Hook Form. This needs to be a button.
[3:20] With submit. I'm going to change these to be the name. OK. Now if we save this, we can come back to our application. Now, let's add a customer. Let's give a new name. Just give it my name.
[3:33] You didn't know I worked there, but now if we submit and we can check this on planet scale. Go to our dashboard. Come to your application and come to the console. Just connect to the dev branch.
[3:44] We need to add our star here. We see that this customer is created.
[3:49] In this lesson we got started with Server Actions by removing our customer API route for creating a customer. We created our new Add Customer action. Then we came into our add Customer form and we removed all of our React Query and React Hook Form code and updated our form to use our new action.