1 00:00:00,000 --> 00:00:03,000 So how do we convert this function, 2 00:00:03,000 --> 00:00:04,000 this form action, 3 00:00:04,000 --> 00:00:07,000 this client form action into a server action? 4 00:00:07,000 --> 00:00:08,000 Well, it's simple. 5 00:00:08,000 --> 00:00:12,000 Inside of this function, and that's important. 6 00:00:12,000 --> 00:00:16,000 It must be inside of that function, you add use server. 7 00:00:18,000 --> 00:00:21,000 Now you might recall the use client directive, 8 00:00:21,000 --> 00:00:24,000 which we had to use here and there earlier in the course 9 00:00:24,000 --> 00:00:29,000 to mark a component as a client-side component. 10 00:00:29,000 --> 00:00:33,000 So as a component that's also executing on the client, 11 00:00:33,000 --> 00:00:35,000 which all those other React components 12 00:00:35,000 --> 00:00:40,000 in a NextJS project normally don't do. 13 00:00:40,000 --> 00:00:42,000 Now here we see use server 14 00:00:42,000 --> 00:00:45,000 and that's some code we didn't need thus far. 15 00:00:46,000 --> 00:00:51,000 use server is also a directive, just like use client, 16 00:00:51,000 --> 00:00:56,000 which you don't need to mark components as server components 17 00:00:56,000 --> 00:00:57,000 because that's the default, 18 00:00:57,000 --> 00:01:01,000 but which you do need to create a server action. 19 00:01:01,000 --> 00:01:04,000 So, which we do need here in this case 20 00:01:04,000 --> 00:01:08,000 to tell React and NextJS that this function here, 21 00:01:08,000 --> 00:01:11,000 this action which we set on this form 22 00:01:11,000 --> 00:01:16,000 is not a client form action, but a so-called server action. 23 00:01:16,000 --> 00:01:19,000 That's why use server is important here. 24 00:01:19,000 --> 00:01:20,000 And that's not all. 25 00:01:20,000 --> 00:01:24,000 If we would just add this, we would get another error. 26 00:01:24,000 --> 00:01:26,000 As you see if I reload. 27 00:01:26,000 --> 00:01:29,000 We would get the error that Server actions 28 00:01:29,000 --> 00:01:31,000 must be async functions 29 00:01:31,000 --> 00:01:33,000 because that's indeed something else 30 00:01:33,000 --> 00:01:36,000 you must do with that function. 31 00:01:36,000 --> 00:01:39,000 You must add the async keyword in front of it 32 00:01:41,000 --> 00:01:43,000 so that it will return a promise. 33 00:01:43,000 --> 00:01:47,000 And that then converts this function into a server action, 34 00:01:47,000 --> 00:01:50,000 which unlike that client form action, 35 00:01:50,000 --> 00:01:53,000 will now only execute on the server. 36 00:01:53,000 --> 00:01:56,000 So this code can't execute on the client, 37 00:01:56,000 --> 00:01:57,000 no matter what you do, 38 00:01:57,000 --> 00:02:00,000 it will only execute on the server. 39 00:02:00,000 --> 00:02:02,000 So in the end, what NextJS will do here 40 00:02:02,000 --> 00:02:06,000 is it will make sure that once this form is submitted, 41 00:02:06,000 --> 00:02:08,000 it will, behind the scenes, 42 00:02:08,000 --> 00:02:12,000 send a request to itself, you could say, 43 00:02:12,000 --> 00:02:14,000 and trigger that function for you. 44 00:02:14,000 --> 00:02:16,000 And you don't need to send the request 45 00:02:16,000 --> 00:02:19,000 and attach any form data manually. 46 00:02:19,000 --> 00:02:22,000 Instead, NextJS will take care of that 47 00:02:22,000 --> 00:02:24,000 and you can just add your logic 48 00:02:24,000 --> 00:02:26,000 for handling the form submission 49 00:02:26,000 --> 00:02:28,000 into this server action function. 50 00:02:29,000 --> 00:02:32,000 And in this case, I'm just extracting some data 51 00:02:32,000 --> 00:02:33,000 and logging it to the console. 52 00:02:34,000 --> 00:02:38,000 But with all that done, now, finally, 53 00:02:38,000 --> 00:02:40,000 if we reload, we get no more error, 54 00:02:40,000 --> 00:02:44,000 and we should be able to enter some data here. 55 00:02:45,000 --> 00:02:49,000 A delicious burger image here, doesn't matter though 56 00:02:49,000 --> 00:02:53,000 because we won't store it anywhere at this point anyways. 57 00:02:53,000 --> 00:02:55,000 And if I now click Create Post, 58 00:02:55,000 --> 00:02:57,000 we won't get any feedback here 59 00:02:57,000 --> 00:03:00,000 because we haven't added any logic 60 00:03:00,000 --> 00:03:02,000 at all to provide feedback. 61 00:03:02,000 --> 00:03:06,000 But if you go back and open that terminal 62 00:03:06,000 --> 00:03:08,000 where you started that development server, 63 00:03:08,000 --> 00:03:11,000 you should see some output here. 64 00:03:13,000 --> 00:03:17,000 You see three values here, two times the text test, 65 00:03:17,000 --> 00:03:18,000 and then the file 66 00:03:18,000 --> 00:03:22,000 which I uploaded with the data that describes it. 67 00:03:22,000 --> 00:03:25,000 And these three pieces of data, of course, 68 00:03:25,000 --> 00:03:29,000 are these three variables which we fill with data 69 00:03:29,000 --> 00:03:31,000 that we extract from the form. 70 00:03:31,000 --> 00:03:33,000 And that therefore proves 71 00:03:33,000 --> 00:03:36,000 that this server action is executed 72 00:03:36,000 --> 00:03:38,000 and that it is executed on the server 73 00:03:38,000 --> 00:03:42,000 because any log output we see here in this terminal 74 00:03:42,000 --> 00:03:44,000 where we started the development server 75 00:03:44,000 --> 00:03:46,000 is a server-side log. 76 00:03:46,000 --> 00:03:51,000 And we see that extracting that foreign data works. 77 00:03:51,000 --> 00:03:55,000 And that's the offer, how we can create such a server action 78 00:03:55,000 --> 00:03:57,000 and how we can use such a server action 79 00:03:57,000 --> 00:04:00,000 to handle the submission of a form 80 00:04:00,000 --> 00:04:03,000 and extract the data that was submitted. 81 00:04:04,000 --> 00:04:08,000 Well, and with that, as a next step, I, of course, 82 00:04:08,000 --> 00:04:12,000 want to make sure that we actually also store 83 00:04:12,000 --> 00:04:14,000 that data in the database.