How to use Server actions Next.js

so a couple of weeks back next year's announced server actions so in this video we will see that what are server actions and do we really not require API routes if we have server actions currently server actions are in Alpha that is you should not use them in production but you can simply try out the experimental feature so what I've done here is this that I've created a very basic nexjs project and just make sure to use server actions you should be on 13.4.0 and up I'm on 13.4.2 and the next thing you need to do is to enable the experimental feature of the server actions so you need to go to your next dot config.js file and you need to Simply enable this thing here that is experimental server access to be true so let's go to our ph.t6 file that is the index route of our application currently what we need to do if we need to make this button like clickable here if I do something like this on this button here that is on click equal to something like this that is alert one two three then we see that we are getting an error because dude handle clicks or to add any kind of interaction you need to make this component a client component so what we can do we can simply make this component a client component and then I can simply click it and we get alert here so but that's not what we are talking about but we are talking about server action so what are server actions so firstly what I'm going to do I'm simply going to remove this on click event handler so typically let's say we have a form here so let me create an a form here and then we have a button here that is the submit button so let's rename this to submit like this and we have a couple of input elements so let me simply create in one input element type would be text and name would be simply name so now if we have this kind of an actions what we typically used to do in a client component firstly we need to make this a whole page a client component or otherwise you can simply destructure this form into its own component and make that as a client component but I'm simply using the page which is currently a server component So currently what I need to do to do any kind of interaction with this form I need to make this page a client component by using the use client directive but with server actions we do not need to do so so what we need to do to create a server actions we need to create an async function inside our own component like inside a server component you cannot create actions inside a client component but you can create a function and async function inside a server component since by default this index page is a server component so what I can do I can simply create in a function here like this and let's simply call it handle form like this and to make this function a server actions we need to Simply put in the use server directive here simply like this and I can then simply log in the something like one two three so inside this form action what we need to do instead of passing in the action here what we need to pass here we can simply pass in the function name here that is handle form simply like this so if we save this we see nothing changes here but if we simply submit this form here Watch What Happens so if we submit the form here we see that instead of getting the log statement here in the terminal like inside the console of the Chrome browser we are getting the log statements here inside the terminal here which means that this piece of code that is this function is running on server instead of the client so therefore it becomes very handy if you want to handle some kind of form submission from the user and you want to submit it to your API route but instead what you can do you can simply create in a server action like this inside your component and then you can simply do all the database operations here as well so do all database operations or call in other apis or call other apis directly inside this function here because it runs on the server it it is never sent back to the client it runs only on the server and to show you that how do we get the form data here so what I can do I can simply call call form data form data here so form data like this and this of this is of type of form data like this and what I can do I can simply extract out the name using the form data thing so const name equal to form data dot get name simply like this and I can simply log in the name here so console.log name simply like this and I can do all the database operations here or whatever if I am working upon so watch what happens again so currently if I simply put in truly here and if I submit the form we see that we are getting this output here that is truly which is coming from the form data itself so this is how easy it is to create your server actions so now let me show you one more thing that is if you do not want to handle any kind of form but you simply want to handle the button here that is you simply want to get interactive button instead of making it a client component you can use server actions as well so what you can do you can again create an async functions so async function let's call it handle button and there would be no params here and here we are simply going to login something let's say four five six so now to handle click events on this button or let me create another button here so let me create another button here and let's call it handle click and now what I want to do I cannot do it like this that is I cannot simply call this handle button this function firstly we need to make it the server action by using the userver directive and now I cannot simply do it like this that I cannot simply call it handle button here because it would give me an error here right away so if I click on handle click we see that we get an error here so therefore what we can do to overcome this we can wrap this button inside a form itself and the action would be handle click handle click or what is what or handle button not handle click and instead of passing in the on click event here I can pass it to my form so if we save this and if we click on handle click we should see something inside the terminal here so we see that we are getting these messages here so now let me show you one another way to create your server actions because right now we are creating it inside the components but let's say that this handle button function or this handle form button may be required by any other component so for that what I can do I can simply create in a new file here called actions.ts simply like this and then I can simply annotate this file with use server directive because all the functions here would be running on the server so I can simply extract out both these functions here so let me cut out both these functions and let me paste it here inside the access.js file and I'll simply export all the both the functions simply like this so export async function handle form export async function handle button and now we do not need to use the use server directive inside the function itself because it is mentioned at the top level of the file here so let's save this and if we go to the page.tsx file we need to import those two functions from actions so if we save this and if we simply click on submit here we see that we are again getting back the same response which we are getting when the function when the action was inside this component and in the similar way we can handle the click event here for this button itself so now let's have a look at one more thing that is let's see once we submit this form here that is handle form and we want to revalidate this page itself so what we can do we can go to our access or TS file and here we can simply use this thing here that is revalidate path from next cache and here we can pass in the path which we want to revalidate in our case that would be an index routes and if we save this file and if we save here this page would be like revalidated here though we cannot see it but trust me this would be revalidated here because we have passed in the revalidate path thing here so now let's create one more button inside our page.tsx file so let's simply call it a button here and class name would be BTN and we want to handle an on click event listener here or the on click event here so what we need to do since we are handling on click here we need to make this component a client component so let's simply make it client simply like this and let me quickly create enough function here inside the actions so let me copy this function and handle like button let's call it like button not like much like button and let's say this function returns in something so let's return it let us like done so like done and this takes in some ID or something like that so let me pass in an ID here called with with an ID of a string that is like the type of this ID is the string so let's save this and we want to call this function that is this action here that is handle like button from our this button here that is this vtn so the like button so what we need to do we need to import something from react and that is the use transition hook so we can simply say import use transition from react and then what we can do we can simply say let something equal to use transition and here we can we have the is spending so we are not going to use this spending but we are going to use the start transition thing here and now what I can do since it's a client component I can simply say start transition like this and here I can pass in that function that is handle like button and here we can pass in some string values so let's say that whatever the ID is and now since it's a promise here because this action is a promise here because it's an async function and it returns a string here so let me also explicitly Define in the return type here that is a string promise would be resolved to string simply like this so what I can do I can go to my page.tsx file and here we have too many like brackets here so handle like button dot then we have the value which is of type of string so I can simply log it here inside my Chrome console so console.log value so let's save this so once I click on the like button we would be triggering this action here and it would be logging one four five six or let's say one two three four five six or let me simply log in the ID here which is passed here and then we are simply returning like done so if we save this and we go back we click on the like button we see that we get the ID here inside the server action that is this action here we are logging in the ID and then finally in this log here we are getting this thing here that is liked in so this is one more way which in which way in which you can use your server actions or your server functions directly from the client components so that's all about the server actions and you can read more about server actions inside the next year's docs so thank you bye Tata take care and have a good day and have a great day

Channel: Mafia Codes

Views: 534

Keywords: mafiacodes, nextjs, yourstruly, server actions in nextjs, server actions, API routes, api

Id: AxqcCv29-do

Length: 11min 39sec (699 seconds)

Published: Mon May 22 2023