1
00:00:00,000 --> 00:00:03,000
So this is how we can add a Server action.

2
00:00:03,000 --> 00:00:06,000
There also is another way of adding it though.

3
00:00:06,000 --> 00:00:09,000
You can add it in a component like this,

4
00:00:09,000 --> 00:00:11,000
but this will only work if the component

5
00:00:11,000 --> 00:00:15,000
in which you are adding it is not a client component.

6
00:00:15,000 --> 00:00:18,000
If you had use client here at the top

7
00:00:18,000 --> 00:00:21,000
because somewhere else in the component you might be using

8
00:00:21,000 --> 00:00:24,000
some client-only feature, you would get an error

9
00:00:24,000 --> 00:00:28,000
that you are not allowed to have server actions

10
00:00:28,000 --> 00:00:30,000
in a client component file.

11
00:00:31,000 --> 00:00:34,000
So that would be a problem then.

12
00:00:34,000 --> 00:00:36,000
Of course, here we don't need use client,

13
00:00:36,000 --> 00:00:39,000
though actually later we will need it,

14
00:00:39,000 --> 00:00:41,000
but at the moment we would be fine like this,

15
00:00:41,000 --> 00:00:45,000
but nonetheless this would be a potential problem.

16
00:00:45,000 --> 00:00:47,000
In addition, you also might not want

17
00:00:47,000 --> 00:00:49,000
to have your server-side

18
00:00:49,000 --> 00:00:53,000
form submission handling logic in the same file

19
00:00:53,000 --> 00:00:54,000
as your JSX code.

20
00:00:54,000 --> 00:00:57,000
You might want to separate that.

21
00:00:57,000 --> 00:00:58,000
And for those reasons,

22
00:00:58,000 --> 00:01:02,000
you can also store server actions in separate files.

23
00:01:03,000 --> 00:01:05,000
Therefore, here, I'll actually go back

24
00:01:05,000 --> 00:01:07,000
to that root lip folder,

25
00:01:07,000 --> 00:01:10,000
and add a actions.js file in there,

26
00:01:10,000 --> 00:01:13,000
though the file name does not matter.

27
00:01:13,000 --> 00:01:16,000
It doesn't have to be named actions.js,

28
00:01:16,000 --> 00:01:18,000
it could be any name.

29
00:01:18,000 --> 00:01:21,000
What's important in that file though

30
00:01:21,000 --> 00:01:25,000
is that it has that Use Server directive at the top.

31
00:01:25,000 --> 00:01:28,000
So now not inside of a function,

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

33
00:01:30,000 --> 00:01:33,000
When adding it at the top

34
00:01:33,000 --> 00:01:37,000
of a file like this, all the functions you might define

35
00:01:37,000 --> 00:01:41,000
in that file will be treated as Server Actions.

36
00:01:41,000 --> 00:01:46,000
So that simply now allows us to go back to that Share page

37
00:01:46,000 --> 00:01:50,000
and grab that share meal function here,

38
00:01:50,000 --> 00:01:52,000
and cut it from there,

39
00:01:53,000 --> 00:01:56,000
and instead move it into this Actions file.

40
00:01:56,000 --> 00:01:59,000
There it now must be exported

41
00:01:59,000 --> 00:02:03,000
so that it can be used in other files, and you can

42
00:02:03,000 --> 00:02:06,000
and should now remove use server in here

43
00:02:06,000 --> 00:02:08,000
because we already got that at the top of the file.

44
00:02:11,000 --> 00:02:14,000
And with that server action outsourced here,

45
00:02:14,000 --> 00:02:18,000
we can now go back to the share meal page

46
00:02:18,000 --> 00:02:22,000
and still use it as an action here on the forum

47
00:02:22,000 --> 00:02:24,000
by simply importing it.

48
00:02:26,000 --> 00:02:28,000
So by adding this import.

49
00:02:29,000 --> 00:02:32,000
And now you would be able to convert this

50
00:02:32,000 --> 00:02:35,000
to a client component if you needed to.

51
00:02:36,000 --> 00:02:39,000
Now, you would not get an error when doing that,

52
00:02:39,000 --> 00:02:42,000
and that might sound strange, but the problem

53
00:02:42,000 --> 00:02:46,000
before was simply that you were defining client

54
00:02:46,000 --> 00:02:49,000
and server-side code in the same file,

55
00:02:49,000 --> 00:02:51,000
and the build process that's used

56
00:02:51,000 --> 00:02:54,000
by NextJS is essentially not able to separate

57
00:02:54,000 --> 00:02:58,000
that in a clean way, and therefore server-side code

58
00:02:58,000 --> 00:03:01,000
could accidentally end up on the client side,

59
00:03:01,000 --> 00:03:04,000
which could pose security issues

60
00:03:04,000 --> 00:03:06,000
and cause other problems as well.

61
00:03:07,000 --> 00:03:09,000
That's why for technical reasons,

62
00:03:09,000 --> 00:03:11,000
you can't mix both in the same file,

63
00:03:11,000 --> 00:03:14,000
but you can absolutely import a server action

64
00:03:14,000 --> 00:03:16,000
from another file and then use it

65
00:03:16,000 --> 00:03:18,000
in such a client component.

66
00:03:18,000 --> 00:03:21,000
Again, here we don't need use client,

67
00:03:21,000 --> 00:03:23,000
but it is important to understand

68
00:03:23,000 --> 00:03:25,000
that you can blend these two worlds

69
00:03:25,000 --> 00:03:29,000
and mix these two worlds, as I just described it.

70
00:03:30,000 --> 00:03:33,000
But with that, it's now finally time to make sure

71
00:03:33,000 --> 00:03:36,000
that we're not just logging the meal,

72
00:03:36,000 --> 00:03:40,000
but that we're actually storing it in a database,

73
00:03:40,000 --> 00:03:43,000
and that we store the image on the file system.