Next.js 13 Server Actions Tutorial

nextjs 13.4 just came out and with it came the release of something called server actions I have to be honest I was really confused as to what these even were I didn't understand the point of them at first or how they worked based on the documentation and the other videos I had seen on the subject but I really took a lot of time to understand how they work and what they are and I really think they're going to be game changing I'm going to show you exactly how they work before I do that I just wanted to take some time to conceptually explain what server actions are and what they do with next js13 and the new app directory next.js made the decision to go server side first by default by default all of your components are server side the way it had worked up till now is a server component the initial HTML is rendered on the server in the client-side JavaScript bundle size is reduced so instead of react rendering your whole application client side a lot of your code can instead remain entirely on the server while only what is needed is sent to the client side up until now server side components could only work if there is no interactivity inside of the component for example if you wanted to use an input or a button with a listener or any sort of client-side hook like use state if you wanted any sort of interactivity with the code from the user you had to use what's called a client component the way you do this is by adding the word use client at the top of the page and then the rest of the code is normal client-side code well server actions completely changes all of this with server actions you can now add interactivity into a server-side component you do not have to use a client-side component in all cases anymore and now let's go ahead and get into some code to show you how it works if you'd like to follow along I've created a prompt at nextchat.ai nextchat.ai is a chatgpt powered service with a global prompt Library it has additional features that chat.openai.com does not have like conversation folders and prompt libraries and it also does not keep a record of your conversations or prompts so it keeps your conversation secure if you haven't already go to nextchat.ai click the sign up free button it's free to sign up there's no credit card required that'll take you to a page like this over here in your prompt Library section click this Global prompt Library once you're on the global prompts Library you can say control F search for Server actions there's two prompts that talk about server actions don't click on this first prompt Alpha documentation I found that one doesn't work very well instead there's one called next 13 server actions conceptual notes and documentation so that one right there you can scroll scroll down to that one click copy prompt come back to your conversation click new prompt and in that prompt you can name it next 13 server actions paste The Prompt there click save and now I'm going to start this conversation with that prompt this prompt will help you understand how server actions actually work it teaches nextchat.ai how server actions work so under this prompt I'm gonna just ask how do I set up server actions in my project so it explains the first thing you need to do is go to your next dot config.js file make sure you add experimental server actions true to that file so here's my project you'll need to go to this next.config.js file where it says next config put this experimental key and value within the config this has to be here or server actions won't work and now I'm going to say I have a blank project create an example home page that uses server actions so you'll notice in this response next chat doesn't yet know that in a server side component you can't use hooks so to update the responses you'd need to tell it that we'll deal with that in a second but what I wanted to show you is an example of a server action this right here is an example of a server action you'll notice the server action function handles submit is attached to a form action the reason is if I'm understanding things correctly server actions will only work with a form and then whatever function you attach to a form a few things you need to know it has to be an async function even if you don't use a weight in the function it still needs to be asynchronous and you need to make sure to add this use server string at the top of the function in order for this to work now this brought me to a question I had why do I have to do this if this is a server side component isn't this already on the server well to understand why we have to use this use server key again we have to talk about conceptually how this is working so with a server side component basically what's happening is it's compiling a lot of code up front on the server and then only sending the code it needs to to the client side but a big thing to remember is that the code that starts on your server side still ends up on your client side in other words whenever a user is clicking the submit button in a form to trigger the handle submit function that handles submit function is still on the client side and so it will throw an error if you don't add in this use server and let me just show you what I mean I'm going to go ahead and copy this code I'm going to leave out use State because this is going to be a server side component and use State won't work but I'll copy the rest of the code I'll open up my app directory go to my page I'm going to delete all the default code I'll add all of this in I'll just change this to home I'm going to delete this hook because hooks don't work on server side code and I'll just put a console log here that says handle submit triggered one of the cool things with a form is you don't actually have to add a value or an on change event to your inputs you can just give it a name instead I'll name this email and a type I'm going to say text but it does default to text so you could leave this empty if you wanted to and then whenever you click the submit button it automatically will trigger this action function and instead of using this e I'm going to say form data and there's a built-in data type for form data built into JavaScript I'm going to delete this prevent default as well and then the way you get data from there is you can create a variable and I'll just call this variable email and I'll say this equals form data dot get and I'll just say the name of the input and so I'll say email and now I'll go ahead and put that in my console log as well and so let's just explain a little bit more what's going on so before server actions to get the value of an updated state in say an input to track the updated State and this had to be done on a client-side component or it just wouldn't work but with server actions you can now just get the value from the form using this method form data dot get and then the name of the input that you want to get the value from and by using this use server string this tells your next JS app that this function should only run on the server it should not run in your browser and so nexjs just has a way in the background to automatically make this function run on the server instead of on the client side and so let's see if it works we'll say npm run depth this is my app to make these lines go away I'm going to come here to my div I'm gonna give it a height of screen and a width of screen and change the background to White this should fix the issue with the styling and I'll go ahead and say Flex justify center items Center to Center everything and I'll say Flex call to make it look a little better and in the input I'll give it a class name I'll say border so let's go ahead and test this out first let me click the inspector I'll open up the console log I'll say test you'll notice nothing is happening in the browser even though I'm clicking this test button but if we come back here to the server we can see each time the handle submit function was triggered and we can see the value of email now let's try to take out this use server string see what happens you'll notice we get this error because it knows we're trying to add in interactivity that normally would live on the client side into a server-side component and so it just won't work again is is even though this is a server-side component by the time we see it in our browser it has changed into client-side code by the time we see it and so we need to add in this use server keyword so it knows this interactive function needs to live on the server side and then everything starts working again now the next thing you might be asking is what is the point of this when you're making an update using a server action nothing is happening in the browser so why would you ever want to use this the reason you would want to use this is if you ever want to make any kind of updates to like the database without affecting the speed of your code on the browser and so for example if you wanted to track something about what the user is doing in your browser instead of running an API call in your browser which would slow down your UI instead just run that code on your server and it won't slow down your browser code at all but what if you would like to update the UI after submitting something using a server action well in my opinion if you're going to do that you might as well use a client-side component but if you just really want to use the server action and also update the UI you can do that with something called revalidate path if you come back to your next chat conversation you can say I want to revalidate my home page on submit how would I do that and it starts explaining how you can use the revalidate path function again I haven't taught it that you can't use use state in a server side component and next chat doesn't know that yet because its knowledge base is stuck in the year 2021 so I would need a different prompt for that but I'm interested in this revalidate path function so the way you could update your UI is whenever you're done with whatever logic you're going to run in your handle submit function you can say revalidate path and whatever page you're on in your app put those parameters here so if you're on a create page or something like that you could say slash create and make sure to import the revalidate path at the top of your screen and that is how you could update your UI if you'd like to using a server action and that is how server actions work it's basically a way to run tasks on your server that don't need to be run on your client side like maybe for analytical purposes you want to track what a user is doing what pages they're visiting what buttons they're clicking things like that you probably don't need to be running those API calls on the client side because they'll be slowing down your code instead you could run them on the server side using server actions and it won't slow down your client-side code let me know in the comments below what do you think is the best use case for a server action do you think we should be using server actions do you think they're pointless and we should ignore them do you like this direction of trying to put as much as you can on the server side instead of the client side or do you think it's okay to keep code on the client client side let us know your thoughts in the comments below like this video if you'd like to see more content like this don't forget to subscribe and hit the Bell icon to be notified when more videos come out thanks for watching and I'll see you next time

Channel: Native Notify

Views: 2,065

Keywords: nextjs, next.js 13, server actions, js, next, 13

Id: hD11c2mrq6Q

Length: 12min 12sec (732 seconds)

Published: Tue May 23 2023