So how do we convert this function,
this form action,
this client form action into a server action?
Well, it's simple.
Inside of this function, and that's important.
It must be inside of that function, you add use server.
Now you might recall the use client directive,
which we had to use here and there earlier in the course
to mark a component as a client-side component.
So as a component that's also executing on the client,
which all those other React components
in a NextJS project normally don't do.
Now here we see use server
and that's some code we didn't need thus far.
use server is also a directive, just like use client,
which you don't need to mark components as server components
because that's the default,
but which you do need to create a server action.
So, which we do need here in this case
to tell React and NextJS that this function here,
this action which we set on this form
is not a client form action, but a so-called server action.
That's why use server is important here.
And that's not all.
If we would just add this, we would get another error.
As you see if I reload.
We would get the error that Server actions
must be async functions
because that's indeed something else
you must do with that function.
You must add the async keyword in front of it
so that it will return a promise.
And that then converts this function into a server action,
which unlike that client form action,
will now only execute on the server.
So this code can't execute on the client,
no matter what you do,
it will only execute on the server.
So in the end, what NextJS will do here
is it will make sure that once this form is submitted,
it will, behind the scenes,
send a request to itself, you could say,
and trigger that function for you.
And you don't need to send the request
and attach any form data manually.
Instead, NextJS will take care of that
and you can just add your logic
for handling the form submission
into this server action function.
And in this case, I'm just extracting some data
and logging it to the console.
But with all that done, now, finally,
if we reload, we get no more error,
and we should be able to enter some data here.
A delicious burger image here, doesn't matter though
because we won't store it anywhere at this point anyways.
And if I now click Create Post,
we won't get any feedback here
because we haven't added any logic
at all to provide feedback.
But if you go back and open that terminal
where you started that development server,
you should see some output here.
You see three values here, two times the text test,
and then the file
which I uploaded with the data that describes it.
And these three pieces of data, of course,
are these three variables which we fill with data
that we extract from the form.
And that therefore proves
that this server action is executed
and that it is executed on the server
because any log output we see here in this terminal
where we started the development server
is a server-side log.
And we see that extracting that foreign data works.
And that's the offer, how we can create such a server action
and how we can use such a server action
to handle the submission of a form
and extract the data that was submitted.
Well, and with that, as a next step, I, of course,
want to make sure that we actually also store
that data in the database.