1
00:00:00,000 --> 00:00:02,000
Now for this section,

2
00:00:02,000 --> 00:00:06,000
I prepared a brand new basic NextJS project

3
00:00:06,000 --> 00:00:08,000
and you find it attached.

4
00:00:08,000 --> 00:00:10,000
Once you downloaded it,

5
00:00:10,000 --> 00:00:13,000
you'll just need to run npm install once

6
00:00:13,000 --> 00:00:15,000
to install all the dependencies,

7
00:00:15,000 --> 00:00:17,000
and then you can start the development server

8
00:00:17,000 --> 00:00:19,000
with npm run dev.

9
00:00:20,000 --> 00:00:24,000
And you'll then get a very simple application

10
00:00:24,000 --> 00:00:28,000
that allows you to view posts if there were any.

11
00:00:28,000 --> 00:00:30,000
We'll add some soon.

12
00:00:30,000 --> 00:00:32,000
And which most importantly,

13
00:00:32,000 --> 00:00:35,000
therefore also allows you to add new posts.

14
00:00:35,000 --> 00:00:39,000
And that's precisely what we'll work on

15
00:00:39,000 --> 00:00:40,000
throughout this section

16
00:00:40,000 --> 00:00:44,000
because, of course it's that adding posts part

17
00:00:44,000 --> 00:00:47,000
that involves the creation of new data

18
00:00:47,000 --> 00:00:49,000
and therefore the mutation of data

19
00:00:49,000 --> 00:00:52,000
and that's exactly the main topic of this section.

20
00:00:53,000 --> 00:00:55,000
So we got a form

21
00:00:55,000 --> 00:00:58,000
in this starting application I provided to you.

22
00:00:58,000 --> 00:01:00,000
And the goal of course, is to make sure

23
00:01:00,000 --> 00:01:02,000
that when this form is submitted

24
00:01:02,000 --> 00:01:05,000
with help of that create post button,

25
00:01:05,000 --> 00:01:09,000
that we save the data that has been entered here,

26
00:01:09,000 --> 00:01:11,000
that we store the uploaded image somewhere,

27
00:01:11,000 --> 00:01:14,000
and that we store the title and the content somewhere,

28
00:01:14,000 --> 00:01:17,000
for example, in a database.

29
00:01:17,000 --> 00:01:22,000
And indeed, in this starting project I prepared for you,

30
00:01:22,000 --> 00:01:24,000
you'll find a lib folder

31
00:01:24,000 --> 00:01:29,000
and in there, you'll find a posts.js folder,

32
00:01:29,000 --> 00:01:32,000
which does indeed include code

33
00:01:32,000 --> 00:01:35,000
to store a new post in a database.

34
00:01:36,000 --> 00:01:39,000
And this file actually also contains

35
00:01:39,000 --> 00:01:41,000
much more code than that.

36
00:01:41,000 --> 00:01:46,000
It also includes all the code for setting up that database

37
00:01:46,000 --> 00:01:47,000
and that code will run

38
00:01:47,000 --> 00:01:49,000
every time you start this application,

39
00:01:49,000 --> 00:01:53,000
making sure that all the necessary tables are created

40
00:01:53,000 --> 00:01:55,000
if they don't exist already.

41
00:01:55,000 --> 00:02:00,000
And as you see here, we have a users table,

42
00:02:00,000 --> 00:02:04,000
we have a posts table, and we have a likes table.

43
00:02:04,000 --> 00:02:07,000
And I'm using a SQLite database here

44
00:02:07,000 --> 00:02:09,000
to store all that table data.

45
00:02:09,000 --> 00:02:13,000
And I also got some code here to set up two dummy users,

46
00:02:13,000 --> 00:02:15,000
which we'll use throughout this section.

47
00:02:16,000 --> 00:02:19,000
You will learn how to add authentication

48
00:02:19,000 --> 00:02:22,000
and user management later in this course.

49
00:02:22,000 --> 00:02:26,000
For now, we'll work with these dummy users here.

50
00:02:26,000 --> 00:02:27,000
So that's what we got in there.

51
00:02:27,000 --> 00:02:32,000
And then as mentioned, we got this storePost function,

52
00:02:32,000 --> 00:02:35,000
which in the end, of course should be triggered

53
00:02:35,000 --> 00:02:39,000
whenever this form here is submitted.

54
00:02:39,000 --> 00:02:42,000
And that, of course means that we need to find out

55
00:02:42,000 --> 00:02:45,000
how we can handle the submission of this form.

56
00:02:45,000 --> 00:02:49,000
And for that, we got various options.

57
00:02:49,000 --> 00:02:51,000
One option would be

58
00:02:51,000 --> 00:02:55,000
to set up a standalone separated backend API

59
00:02:55,000 --> 00:02:59,000
that accepts requests that contain that form data

60
00:02:59,000 --> 00:03:03,000
and that then stores the submitted data in some database.

61
00:03:03,000 --> 00:03:05,000
Kind of similar to what I showed you

62
00:03:05,000 --> 00:03:08,000
in the data fetching section,

63
00:03:08,000 --> 00:03:11,000
where we also started with an external API.

64
00:03:12,000 --> 00:03:17,000
But for the same reasons we didn't use that external API

65
00:03:17,000 --> 00:03:20,000
in that data fetching section,

66
00:03:20,000 --> 00:03:23,000
the reason was in the end that we own the data source

67
00:03:23,000 --> 00:03:26,000
and therefore it doesn't really make sense

68
00:03:26,000 --> 00:03:28,000
to set up such an extra API.

69
00:03:28,000 --> 00:03:31,000
For that reason, I won't use

70
00:03:31,000 --> 00:03:34,000
that external API approach here

71
00:03:34,000 --> 00:03:37,000
because why would we create a separate backend API

72
00:03:37,000 --> 00:03:39,000
and a separate project

73
00:03:39,000 --> 00:03:42,000
if we can actually integrate the logic

74
00:03:42,000 --> 00:03:44,000
for accepting form submissions

75
00:03:44,000 --> 00:03:47,000
and storing data in some database

76
00:03:47,000 --> 00:03:50,000
directly into our NextJS application.

77
00:03:51,000 --> 00:03:52,000
And as it will turn out,

78
00:03:52,000 --> 00:03:55,000
we can indeed manage all that directly

79
00:03:55,000 --> 00:03:58,000
in this NextJS application.

80
00:03:58,000 --> 00:04:00,000
And that's therefore the approach I'll use here

81
00:04:00,000 --> 00:04:04,000
in this section because this is a NextJS course

82
00:04:04,000 --> 00:04:05,000
and being able

83
00:04:05,000 --> 00:04:09,000
to handle data submissions is a core NextJS feature.

84
00:04:10,000 --> 00:04:14,000
Now, what we could do as an alternative would be

85
00:04:14,000 --> 00:04:19,000
to add some route handlers here in our project.

86
00:04:19,000 --> 00:04:23,000
We could, for example, in the app folder, add an API folder

87
00:04:23,000 --> 00:04:26,000
and then there add a posts folder

88
00:04:26,000 --> 00:04:27,000
or whatever you wanna name it.

89
00:04:27,000 --> 00:04:31,000
And then in there, add a file named route.js.

90
00:04:31,000 --> 00:04:35,000
I taught you about these route handlers

91
00:04:35,000 --> 00:04:37,000
earlier in the course already.

92
00:04:37,000 --> 00:04:41,000
In there, we could export a function called post.

93
00:04:41,000 --> 00:04:44,000
And with that we would be able to send

94
00:04:44,000 --> 00:04:49,000
and handle post requests to /api/posts.

95
00:04:50,000 --> 00:04:52,000
And then we could put all the logic

96
00:04:52,000 --> 00:04:54,000
for extracting the request body

97
00:04:54,000 --> 00:04:56,000
because we would receive the request

98
00:04:56,000 --> 00:04:59,000
as a argument automatically.

99
00:04:59,000 --> 00:05:03,000
And all the logic for storing that extracted data

100
00:05:03,000 --> 00:05:06,000
into this function here, into this route handler.

101
00:05:07,000 --> 00:05:08,000
We could do that

102
00:05:08,000 --> 00:05:11,000
and that might be a valid approach

103
00:05:11,000 --> 00:05:15,000
if we also have other clients submitting data,

104
00:05:15,000 --> 00:05:16,000
a mobile app for example,

105
00:05:16,000 --> 00:05:20,000
that also needs to send data entered by a user.

106
00:05:20,000 --> 00:05:23,000
But if we're just building this one NextJS application,

107
00:05:23,000 --> 00:05:27,000
this also isn't really something we have to do.

108
00:05:27,000 --> 00:05:30,000
Sure, we could set up those extra routes

109
00:05:30,000 --> 00:05:33,000
and then send data to those routes from the client side,

110
00:05:33,000 --> 00:05:37,000
but NextJS actually offers us a better way

111
00:05:37,000 --> 00:05:41,000
of handling data submissions and data mutations,

112
00:05:41,000 --> 00:05:44,000
and that would be Server Actions.