So what are Server Actions
and how can we use this Server Actions concept
to handle data submissions with NextJS?
Well, first, it's important to understand
that Server Actions
are actually not a NextJS-specific feature,
but actually a feature that is supported by React itself
if you're using React in an environment
where this feature works,
which is not the case in your standard React project
which might be a pure client-side React project,
but which in the end can be unlocked by frameworks
like NextJS that wrap around React.
So this React feature,
this Server Actions React feature,
is in the end, unlocked by frameworks like NextJS.
Still, it is a feature built directly into React
that's then made available by NextJS
to put it like this.
But what's the idea behind Server Actions?
Well, let's create an action
and let's handle the submission of this form here,
which you find in the new-post folder,
in the app folder,
in that page.js file.
Let's handle the submission of this form
with a Server Action
and along the way learn what a Server Action is.
So to handle the submission of this form
with a Server Action, I'll actually start
by handling the submission with a non-Server Action,
with just a form action instead.
And that's another feature
built into React itself already
though at least at the point of time
where I'm recording this video, it's not stable yet,
but it will eventually be a stable feature
that can also be used in client-side React applications.
So in all React projects,
even if you're not using a framework like NextJS
because there is a difference
between a form action and a Server Action as you will see.
And the idea in the end simply is that React
gives you a way of handling
form submissions on the client or server-side
in an easier and simpler way
than it used to be in the past.
And a form action simply is a function you define
either directly in the component like this
or in a separate file that doesn't matter
and you can give this function any name of your choice.
For example, createPost could be a fitting name here,
and you then pass this function, which we created here.
You pass that as a value
to the action prop on the form element,
and that's new.
This action prop is actually a default attribute
you can set on the form element
even if you're not using React.
But when using React,
React takes over that prop
and that attribute, so to say,
and handles it slightly differently
than it would normally work.
Because normally on the form element,
if you are not using React or a React version
that doesn't support that form actions feature,
the action attribute
that can be set on a form element,
in the end, defines the URL
to which the browser will automatically send a request
once the form is submitted.
So that's a default behavior built into the browser.
This action prop or attribute
normally defines the URL
to which the form data will be automatically submitted
once you press a submit button inside of the form.
That's what this action prop normally does.
Now when using a React version that supports form actions,
or NextJS as we do,
this action prop will work slightly differently.
Instead of accepting a URL, it will accept a function
and React will prevent that browser default behavior
of sending a request to some URL
and instead trigger that function
when the form is submitted.
And conveniently, it will then give you
a formData object,
which it will pass into this function
as an argument automatically,
which allows you to extract the data
that was entered into the different inputs
of that form.
And that formData object
is based on that formData interface,
which is also a standard thing in the web,
not React-specific, which in the end,
defines an object that contains various methods
like this get method that you can use to extract
the data that was entered by the user.
So we can use this formData object
which we get automatically here to call the get method
to get hold of the different input values
entered by the user.
And we do get hold of these different values
with help of the name prop and attribute
that's set on those elements,
and that's therefore all important.
When using such a form action as we're doing it here,
and that's all important,
this is not a Server Action yet.
It's a form action,
but it will soon become a Server Action.
When you're using such a form action,
you must set these name attributes
on all the inputs
of which you want to extract their values
because it will be those name values
that you now use with the get method,
like here, get('title') to extract
that inputs value here
to get hold of any values entered by the user.
So that would give me the title value entered by the user.
And we can now repeat that
to all to get hold of the image file
with help of formData.get('image').
And yes, it does work with file pickers just like that.
You can also extract those files.
And soon, I'll also show you
how to then upload and store them in a safe way.
And we can get hold of the content that was entered here
with help of that content name,
which is set on that text area.
So with formData.get('content') like this.
And now here for the moment,
I'll just console.log(title, image, content);
so that we can see whether it works or not,
and that's all.
That's how we can define a client-side form action.
And soon, it will become a Server Action.
We simply create a function
that accepts that formData argument
and we then use this function
as a value on this action prop.
We don't execute the function here.
We don't set those parentheses.
We just use it as a value.
Well, and now with all that done,
if you save everything,
you see we get an error here
at least at the point of time where I'm recording this.
I'm getting an error that I should use this
use server thing here on this function.
And I just mentioned that this here should work.
Well, yes, in theory, that should work
and you find a similar example in the official React docs,
but it will only work if you're using a React version
that supports that feature.
And at this point of time where I'm recording this,
this feature isn't stable yet.
So it might work at the point of time you are viewing this,
but it does not work yet here for me.
But that's no problem
because that's just the first step
towards such a Server Action,
which I actually want to build and which will work.
Because even if this would work here,
this will just be executed on the client.
So we would gather all that data,
but we then would still have to send it to a backend,
for example with help of the fetch function, manually.
And that could be a separated backend
or it could be an API route
defined as part of our NextJS project.
Still, we would manually send a request
from the client-side to some backend.
And just as with data fetching,
where we also could fetch data from the client-side,
this would work
but it would not be the best possible approach here
in a scenario where we own the data source
that should be changed,
so where we own the database, in this case.
And therefore, we'll move on
and now turn this into a Server Action.