1
00:00:00,000 --> 00:00:03,000
So we're making good progress here.

2
00:00:03,000 --> 00:00:05,000
Before we now work on the file upload,

3
00:00:05,000 --> 00:00:08,000
which is of course the missing piece here,

4
00:00:08,000 --> 00:00:10,000
I wanna come back to that Server Action defined

5
00:00:10,000 --> 00:00:12,000
in that NewPostPage component.

6
00:00:13,000 --> 00:00:18,000
You can define Server Actions like this directly inside

7
00:00:18,000 --> 00:00:19,000
of a component function.

8
00:00:19,000 --> 00:00:21,000
There is nothing wrong with that,

9
00:00:22,000 --> 00:00:26,000
but you can actually also define them in separate files,

10
00:00:26,000 --> 00:00:30,000
which can also help you avoid component splits

11
00:00:30,000 --> 00:00:34,000
as we had to do it here with the separate PostForm component

12
00:00:34,000 --> 00:00:37,000
because we wanted to use some feature in there

13
00:00:37,000 --> 00:00:40,000
that needed the use client directive.

14
00:00:41,000 --> 00:00:43,000
Because of that, we had to create a separate component,

15
00:00:43,000 --> 00:00:45,000
which also is no problem,

16
00:00:45,000 --> 00:00:48,000
but we would not have to do that

17
00:00:48,000 --> 00:00:51,000
if we wouldn't define this Server Action instead

18
00:00:51,000 --> 00:00:53,000
of the NewPostPage component function.

19
00:00:54,000 --> 00:00:58,000
Because what you can also do in NextJS

20
00:00:58,000 --> 00:01:01,000
is you can store those Server Actions in separate files.

21
00:01:01,000 --> 00:01:04,000
And for that I'll add a actions folder here at the root

22
00:01:04,000 --> 00:01:09,000
of my next project, though neither the name of this folder

23
00:01:09,000 --> 00:01:12,000
nor the position of the folder matters.

24
00:01:13,000 --> 00:01:16,000
I'll then add a new file in there, which I'll give any name

25
00:01:16,000 --> 00:01:18,000
of my choice, for example, posts.js.

26
00:01:18,000 --> 00:01:20,000
But again, this does not matter.

27
00:01:21,000 --> 00:01:23,000
What does matter now though,

28
00:01:23,000 --> 00:01:28,000
is that you now add use server at the top of this file.

29
00:01:28,000 --> 00:01:30,000
So now not inside of a function,

30
00:01:30,000 --> 00:01:33,000
but instead at the top of the file.

31
00:01:34,000 --> 00:01:37,000
And then you can grab any Server Action you want

32
00:01:37,000 --> 00:01:41,000
to outsource, like here, this createPost Server Action

33
00:01:41,000 --> 00:01:43,000
and cut it from that component

34
00:01:44,000 --> 00:01:48,000
and instead add it here in this posts.js file

35
00:01:48,000 --> 00:01:50,000
in the actions folder.

36
00:01:51,000 --> 00:01:54,000
And you could now add multiple Server Actions

37
00:01:54,000 --> 00:01:55,000
to that one single file.

38
00:01:55,000 --> 00:01:57,000
You are not limited to one.

39
00:01:58,000 --> 00:02:01,000
You should remove the use server directive

40
00:02:01,000 --> 00:02:03,000
from this function now

41
00:02:03,000 --> 00:02:05,000
because now we have it at the top of the file.

42
00:02:06,000 --> 00:02:08,000
You only add it inside

43
00:02:08,000 --> 00:02:11,000
of the function if you are creating the function

44
00:02:11,000 --> 00:02:14,000
as a nested function inside of a component function.

45
00:02:15,000 --> 00:02:18,000
And you should add the export keyword here

46
00:02:18,000 --> 00:02:20,000
to make it available outside of this file.

47
00:02:21,000 --> 00:02:24,000
Of course, I'm also using the redirect function in there,

48
00:02:24,000 --> 00:02:26,000
so we should also bring over the import

49
00:02:26,000 --> 00:02:29,000
of that redirect function.

50
00:02:29,000 --> 00:02:32,000
And also cut that storePost import

51
00:02:32,000 --> 00:02:37,000
from the new posts page.js file and add those imports

52
00:02:37,000 --> 00:02:41,000
below the use server directive in the posts.js file

53
00:02:41,000 --> 00:02:42,000
in the actions folder

54
00:02:44,000 --> 00:02:48,000
so that these functions are available in there.

55
00:02:48,000 --> 00:02:50,000
Well, and now with that,

56
00:02:50,000 --> 00:02:55,000
we can simply import this createPost function

57
00:02:56,000 --> 00:02:58,000
from the actions folder.

58
00:02:59,000 --> 00:03:00,000
And with that,

59
00:03:00,000 --> 00:03:04,000
I of course now got a very lean NewPostPage component file,

60
00:03:04,000 --> 00:03:08,000
and we could now bring back the PostForm markup

61
00:03:08,000 --> 00:03:10,000
and logic into this component.

62
00:03:10,000 --> 00:03:13,000
But I'll not do that here because it's not important.

63
00:03:13,000 --> 00:03:15,000
But we could now do that.

64
00:03:15,000 --> 00:03:18,000
We could now turn that into a client component

65
00:03:18,000 --> 00:03:22,000
because we're now no longer defining the Server Action

66
00:03:22,000 --> 00:03:23,000
in that file.

67
00:03:23,000 --> 00:03:27,000
Now here, I won't do it, but we could do it.

68
00:03:27,000 --> 00:03:28,000
And that's therefore another way

69
00:03:28,000 --> 00:03:31,000
of managing your Server Actions.

70
00:03:31,000 --> 00:03:34,000
And especially as they get more complex and contain more

71
00:03:34,000 --> 00:03:38,000
and more code, or if the surrounding component

72
00:03:38,000 --> 00:03:40,000
should become a client component, you might want

73
00:03:40,000 --> 00:03:44,000
to consider outsourcing your Server Actions

74
00:03:44,000 --> 00:03:46,000
into a separate file as we're doing it here.

75
00:03:47,000 --> 00:03:49,000
With all that done, you'll see that

76
00:03:49,000 --> 00:03:52,000
of course the form submission still works as before,

77
00:03:52,000 --> 00:03:55,000
it's just a different code structure now, after all.