So this is how we can add a Server action.
There also is another way of adding it though.
You can add it in a component like this,
but this will only work if the component
in which you are adding it is not a client component.
If you had use client here at the top
because somewhere else in the component you might be using
some client-only feature, you would get an error
that you are not allowed to have server actions
in a client component file.
So that would be a problem then.
Of course, here we don't need use client,
though actually later we will need it,
but at the moment we would be fine like this,
but nonetheless this would be a potential problem.
In addition, you also might not want
to have your server-side
form submission handling logic in the same file
as your JSX code.
You might want to separate that.
And for those reasons,
you can also store server actions in separate files.
Therefore, here, I'll actually go back
to that root lip folder,
and add a actions.js file in there,
though the file name does not matter.
It doesn't have to be named actions.js,
it could be any name.
What's important in that file though
is that it has that Use Server directive at the top.
So now not inside of a function,
but instead at the top of a file.
When adding it at the top
of a file like this, all the functions you might define
in that file will be treated as Server Actions.
So that simply now allows us to go back to that Share page
and grab that share meal function here,
and cut it from there,
and instead move it into this Actions file.
There it now must be exported
so that it can be used in other files, and you can
and should now remove use server in here
because we already got that at the top of the file.
And with that server action outsourced here,
we can now go back to the share meal page
and still use it as an action here on the forum
by simply importing it.
So by adding this import.
And now you would be able to convert this
to a client component if you needed to.
Now, you would not get an error when doing that,
and that might sound strange, but the problem
before was simply that you were defining client
and server-side code in the same file,
and the build process that's used
by NextJS is essentially not able to separate
that in a clean way, and therefore server-side code
could accidentally end up on the client side,
which could pose security issues
and cause other problems as well.
That's why for technical reasons,
you can't mix both in the same file,
but you can absolutely import a server action
from another file and then use it
in such a client component.
Again, here we don't need use client,
but it is important to understand
that you can blend these two worlds
and mix these two worlds, as I just described it.
But with that, it's now finally time to make sure
that we're not just logging the meal,
but that we're actually storing it in a database,
and that we store the image on the file system.