The Best Way To Use Server Action In Next.js

so you're probably using the next J server actions wrong and that's because if you're are reading their dos they're going to lead you down the wrong path in my opinion so I'm going to show you how they want you to do it and how I think you should do it instead all right so check out this very basic to-do application so I just get to-do from a server component and then we map those to-dos and here we have a add to-do form and this add to form obviously has to use the use client directive we use use form state so that we can get the current form status like if there's an error or whatever message we returned from the server we also need to have use form status so that we can have a loading State here we just if it's pending then we disable the button now let's take a look at the server action here I have a create Todo server action it takes in a previous state and a form data parameter but I actually don't know why we need the previous state it's in the doc so I'm just going to leave it there but we probably don't need it here we have to extract the form input from the form data object if you look back at the ad form here we actually have an input and the name is too so that's the name we have to put here and the thing about this is there is no autocomplete there's no intend type safety so you would just have to go back and forth to look at it so if you have multile inputs you have to go back and forth look at it and then go back here and type in and if you type it in wrong which you will probably you're going to get an error or something like that after you attract that you have to parse it with Zod Zod is is a validation Library which is what nextjs docs recommends you parse it if it's not valid you return the errors obviously and is valid you go on to add it to your database here I insert it into my database and this line above here is just to wait two seconds so you can actually see the loaning State We R validate path so the todos will show up and we return a message with the to-do information otherwise return the errors all right now let's talk about the optimal way to use Serve actions in nextjs and that's with the next safe actions Library this library is amazing it makes server acting so much more enjoyable to use and greatly reduce the amount of boy plate that you have to write so to use the next safe action library is very easy you get a use action hook and all you have to do is pass in a server action now this is a unique server action um that you create through the next save action library and I'll show you the implementation later but it's different from a normal server action so you pass in this unique server action and you get back an an execute function a reset a result and a status object that you can use in your code and as you can see here I have a bunch that when clicked will trigger the execute function and basically when you trigger this execute function it runs the create to do safe action server action so when you do that all this does is add a to-do to my database as you can see here I'm also using the status object that you get back from the use action to determine the loading state of my buttons so when status is equal to executing I disable the button I'm also using the result object I get back from the use action the result object is what you get after you're done running the server action so after it's done you get back the result and by the way you don't actually have to use the use action hook you can just run the server action directly which is really nice so I'll show you that right now so as you can see here I'm actually calling the create to do safe action directly I'm not using it with the use action hook uh it's not actually needed and when you do that you get back a very unique object I'll show you this so when you do that you get back an object with the data or the server error or the validation error this is very nice this is different from the normal server action so if you were to do this with a normal server action you would get back something different I'll show you that so just notice that this is a create to do save action and this is a create Tod do action so this is the top one is from the next safe actions library and this is just the default server action okay so when you do the normal Ser action what you get back is not uh that unique object you this is just a normal object that is a string or errors basically it doesn't do all the error handling for you now this makes it really easy to implement a toast feature because all you have to do is await the server action and then when you get back a response you get the data object and that data object will contain whatever you return from the server or it contain uh the errors and you could toast that message directly if you were using the normal server actions to implement a toast feature you would have to use use effect to watch this state object right here uh and whenever it changes you can throw the toast message and as you can see when you compare these two way of doing things this is the normal way and this is the optimal way of doing things you can see there are some benefits already so up here we actually have to create a separate submit button you need to do that or else it wouldn't work so because you need to use the form status hook inside this button and here we actually don't need to do that we just use the status object that we get back from the use action hook so this is one of the niceties of using this Library uh it just makes it a little bit more convenient because I don't think this is very convenient when you have to just for a little button you have to use um separate that into its own component and then use the use status hook inside of it that's not very um that's not a great experience in my opinion Additionally you get in toin type safety which makes it impossible for you to pass in the wrong information so right here if I tried to pass in a number I would have a typ script error I can only pass in a string which keeps stupid mistakes from happening uh it happens all the time so in my opinion into in type safety is the most powerful feature and I would not trade that for Progressive enhancement okay now let's look at how to implement create to do safe action to create a safe action is very easy all you have to do is pass in a Zod schema here I Define it up here always we checking if it's a string with main length of two and when you pass in a schema it will automatically parse the inputs for you so if you can look up here this is the normal way and you have to manually parse the inputs uh and down here when you pass in the schema it will automatically par the inputs so if you look here the inputs is a a to-do object that is a string and it will handle all the error handling for you as well so you don't have to do this you don't have to check if it's success and return the error you don't have to wrap it in a TR catch as you can see it's much shorter it's about one third of the length and all of the error handling is done for you which is super nice and by the way if you're using drizzle you can just infer the create Todo schema from the model itself so let's check that out so here we use create select schema which is from drizzle we put in the to-do model we omit ID and that's going to give you the insert to do parameters that you can use for your schema so here instead of manually writing out the schema with this a to-do you can just use the inferred model instead and on top of that you can also use middlewares with next safe action Library here I have a off action that you can only do when the user is authenticated let's look at how we implemented that here I'm just mocking it but basically you check if the user is logged in return the ID and if it's not it will throw an error and when you do that you will actually get back the user ID as the second parameter to use so this user ID is guaranteed to exist and you cannot call this action unless the user is logged in

Channel: Apestein

Views: 388

Keywords:

Id: qu4gAqGM-k4

Length: 7min 11sec (431 seconds)

Published: Sun Dec 31 2023