So we're making good progress here.
Before we now work on the file upload,
which is of course the missing piece here,
I wanna come back to that Server Action defined
in that NewPostPage component.
You can define Server Actions like this directly inside
of a component function.
There is nothing wrong with that,
but you can actually also define them in separate files,
which can also help you avoid component splits
as we had to do it here with the separate PostForm component
because we wanted to use some feature in there
that needed the use client directive.
Because of that, we had to create a separate component,
which also is no problem,
but we would not have to do that
if we wouldn't define this Server Action instead
of the NewPostPage component function.
Because what you can also do in NextJS
is you can store those Server Actions in separate files.
And for that I'll add a actions folder here at the root
of my next project, though neither the name of this folder
nor the position of the folder matters.
I'll then add a new file in there, which I'll give any name
of my choice, for example, posts.js.
But again, this does not matter.
What does matter now though,
is that you now add use server at the top of this file.
So now not inside of a function,
but instead at the top of the file.
And then you can grab any Server Action you want
to outsource, like here, this createPost Server Action
and cut it from that component
and instead add it here in this posts.js file
in the actions folder.
And you could now add multiple Server Actions
to that one single file.
You are not limited to one.
You should remove the use server directive
from this function now
because now we have it at the top of the file.
You only add it inside
of the function if you are creating the function
as a nested function inside of a component function.
And you should add the export keyword here
to make it available outside of this file.
Of course, I'm also using the redirect function in there,
so we should also bring over the import
of that redirect function.
And also cut that storePost import
from the new posts page.js file and add those imports
below the use server directive in the posts.js file
in the actions folder
so that these functions are available in there.
Well, and now with that,
we can simply import this createPost function
from the actions folder.
And with that,
I of course now got a very lean NewPostPage component file,
and we could now bring back the PostForm markup
and logic into this component.
But I'll not do that here because it's not important.
But we could now do that.
We could now turn that into a client component
because we're now no longer defining the Server Action
in that file.
Now here, I won't do it, but we could do it.
And that's therefore another way
of managing your Server Actions.
And especially as they get more complex and contain more
and more code, or if the surrounding component
should become a client component, you might want
to consider outsourcing your Server Actions
into a separate file as we're doing it here.
With all that done, you'll see that
of course the form submission still works as before,
it's just a different code structure now, after all.