1
00:00:02,000 --> 00:00:04,000
So now we covered getStaticProps

2
00:00:04,000 --> 00:00:07,000
and getStaticPaths and getServerSideProps

3
00:00:07,000 --> 00:00:09,000
and I hope it's clear what these functions do

4
00:00:09,000 --> 00:00:11,000
and why they exist.

5
00:00:11,000 --> 00:00:15,000
They allow us to fetch data for pre-rendering those pages

6
00:00:15,000 --> 00:00:18,000
So that we pre-render the pages with the data

7
00:00:18,000 --> 00:00:21,000
instead of without the data they might need.

8
00:00:21,000 --> 00:00:22,000
Now, up to this point,

9
00:00:22,000 --> 00:00:25,000
we're only working with dummy data though

10
00:00:25,000 --> 00:00:28,000
which is not actually fetched from anywhere.

11
00:00:28,000 --> 00:00:30,000
Instead, we have this dummy array

12
00:00:30,000 --> 00:00:33,000
or in the case of the meetupId page here,

13
00:00:33,000 --> 00:00:35,000
actually hard-coded data

14
00:00:35,000 --> 00:00:37,000
in that return statement.

15
00:00:37,000 --> 00:00:40,000
And that's of course not realistic at all.

16
00:00:40,000 --> 00:00:43,000
Instead, we do have this Add New Meetup page here

17
00:00:43,000 --> 00:00:47,000
which would allow us to enter data for a new meetup.

18
00:00:47,000 --> 00:00:50,000
And hence, we're now going to finish this app

19
00:00:50,000 --> 00:00:52,000
by adding a real backend

20
00:00:52,000 --> 00:00:56,000
with a real database where the data will be stored

21
00:00:56,000 --> 00:00:58,000
and from which we then fetch it.

22
00:00:58,000 --> 00:01:02,000
And this then also allows me to show you the last major

23
00:01:02,000 --> 00:01:04,000
NextJS feature, which is added

24
00:01:04,000 --> 00:01:07,000
by Next to your React apps.

25
00:01:07,000 --> 00:01:11,000
NextJS makes it easy for us to build an API,

26
00:01:11,000 --> 00:01:13,000
a backend API,

27
00:01:13,000 --> 00:01:15,000
together with our front-end React app

28
00:01:15,000 --> 00:01:17,000
in the same project.

29
00:01:17,000 --> 00:01:21,000
For this, we can use another key NextJS feature,

30
00:01:21,000 --> 00:01:24,000
called API routes.

31
00:01:24,000 --> 00:01:28,000
API routes are a special routes, special pages,

32
00:01:28,000 --> 00:01:30,000
if you wanna call it like this

33
00:01:30,000 --> 00:01:34,000
which don't return HTML code, but which are instead

34
00:01:34,000 --> 00:01:37,000
about accepting incoming HTTP requests,

35
00:01:37,000 --> 00:01:40,000
also post patch, put delete requests,

36
00:01:40,000 --> 00:01:45,000
whatever you need with JSON data attached to them

37
00:01:45,000 --> 00:01:48,000
and which then might do whatever you need to do.

38
00:01:48,000 --> 00:01:49,000
For example, store data

39
00:01:49,000 --> 00:01:52,000
in a database and then return JSON data.

40
00:01:52,000 --> 00:01:55,000
So you could say API routes allow you

41
00:01:55,000 --> 00:01:57,000
to build your own API end points

42
00:01:57,000 --> 00:02:00,000
as part of this next project.

43
00:02:00,000 --> 00:02:02,000
And they will then be served

44
00:02:02,000 --> 00:02:05,000
by the same server as your next app.

45
00:02:05,000 --> 00:02:08,000
Now to add API routes, you add a special folder

46
00:02:08,000 --> 00:02:12,000
in your pages folder, and that's a folder named API.

47
00:02:12,000 --> 00:02:16,000
And just as the pages folder has to be named pages,

48
00:02:16,000 --> 00:02:19,000
this folder has to be named API

49
00:02:19,000 --> 00:02:22,000
and it has to be in the pages folder.

50
00:02:22,000 --> 00:02:24,000
Then the NextJS will pick up

51
00:02:24,000 --> 00:02:27,000
any JavaScript files stored in there

52
00:02:27,000 --> 00:02:30,000
and turn those files into API routes.

53
00:02:30,000 --> 00:02:33,000
So into end points, that can be targeted

54
00:02:33,000 --> 00:02:38,000
by requests and that should receive JSON and return JSON

55
00:02:39,000 --> 00:02:41,000
Now in this API folder, you can then again

56
00:02:41,000 --> 00:02:45,000
add JavaScript files where the file names

57
00:02:45,000 --> 00:02:49,000
will act as path segments in the URL.

58
00:02:49,000 --> 00:02:53,000
For example, a new-meetup.js file again,

59
00:02:54,000 --> 00:02:56,000
now here in the API folder.

60
00:02:56,000 --> 00:02:59,000
Now, in those JavaScript files here,

61
00:02:59,000 --> 00:03:03,000
you then don't create a React component function.

62
00:03:03,000 --> 00:03:06,000
These API routes are not

63
00:03:06,000 --> 00:03:10,000
about defining, rendering or returning React components.

64
00:03:10,000 --> 00:03:12,000
Instead in there,

65
00:03:12,000 --> 00:03:16,000
we will define functions which contains server-side code

66
00:03:16,000 --> 00:03:20,000
because API routes will only run on the server

67
00:03:20,000 --> 00:03:21,000
never on the client.

68
00:03:21,000 --> 00:03:25,000
Decoding them will never be exposed to the client.

69
00:03:25,000 --> 00:03:27,000
So we can also use credentials

70
00:03:27,000 --> 00:03:31,000
in API routes without compromising them.

71
00:03:31,000 --> 00:03:34,000
And those functions are then simply triggered

72
00:03:34,000 --> 00:03:37,000
whenever a request is sent to this route,

73
00:03:37,000 --> 00:03:41,000
so to /api/new-meetup here.

74
00:03:41,000 --> 00:03:45,000
This would be the URL of this file

75
00:03:45,000 --> 00:03:47,000
and if a request is sent to this URL,

76
00:03:47,000 --> 00:03:49,000
it will trigger the function

77
00:03:49,000 --> 00:03:51,000
which we have to define in this file.

78
00:03:52,000 --> 00:03:54,000
Now often these function named handler

79
00:03:54,000 --> 00:03:56,000
but the name is up to you,

80
00:03:56,000 --> 00:03:59,000
the important thing is that it's exported.

81
00:03:59,000 --> 00:04:02,000
So we export this handler function here

82
00:04:02,000 --> 00:04:05,000
and this function will receive a request

83
00:04:05,000 --> 00:04:07,000
and a response object.

84
00:04:07,000 --> 00:04:11,000
You might notice from node.js and express.js.

85
00:04:11,000 --> 00:04:14,000
The request object contains data

86
00:04:14,000 --> 00:04:15,000
about the incoming request.

87
00:04:15,000 --> 00:04:18,000
The response object will be needed

88
00:04:18,000 --> 00:04:20,000
for sending back a response.

89
00:04:21,000 --> 00:04:23,000
Now, from that request object,

90
00:04:23,000 --> 00:04:26,000
we can get things like the headers or the request body

91
00:04:26,000 --> 00:04:31,000
and also the request method, route a method property here.

92
00:04:32,000 --> 00:04:36,000
This allows us to find out which kind of request was sent.

93
00:04:36,000 --> 00:04:37,000
And we could, for example,

94
00:04:37,000 --> 00:04:41,000
check if we are receiving having a post request here.

95
00:04:41,000 --> 00:04:44,000
So if the request method is POST,

96
00:04:44,000 --> 00:04:47,000
and we only execute the code in this if check,

97
00:04:47,000 --> 00:04:50,000
if it is a incoming post request.

98
00:04:50,000 --> 00:04:54,000
For other kinds of requests, we don't do anything.

99
00:04:54,000 --> 00:04:57,000
So that would ensure that only post requests

100
00:04:57,000 --> 00:05:01,000
to this route would actually trigger this code in here.

101
00:05:02,000 --> 00:05:07,000
Then here, we can get our data by accessing req.body.

102
00:05:08,000 --> 00:05:10,000
The body field is another built-in field

103
00:05:10,000 --> 00:05:13,000
which contains the body of the incoming request,

104
00:05:13,000 --> 00:05:15,000
the data of the incoming request.

105
00:05:16,000 --> 00:05:19,000
And then we can do whatever we need to do.

106
00:05:19,000 --> 00:05:21,000
Now this year will be the end point

107
00:05:21,000 --> 00:05:23,000
for creating a new meetup.

108
00:05:23,000 --> 00:05:27,000
And therefore it's probably fair to expect that this data

109
00:05:27,000 --> 00:05:32,000
which we get contains a title, a meetup image,

110
00:05:32,000 --> 00:05:35,000
an address and a description field.

111
00:05:35,000 --> 00:05:39,000
After all, it's our page, our project, and our API.

112
00:05:39,000 --> 00:05:42,000
So we can expect whichever data we need.

113
00:05:42,000 --> 00:05:44,000
We will then just have to make sure

114
00:05:44,000 --> 00:05:48,000
that we send the correct data when we do send a request

115
00:05:48,000 --> 00:05:50,000
to this API route later.

116
00:05:50,000 --> 00:05:53,000
But for the moment I do indeed expect

117
00:05:53,000 --> 00:05:56,000
that we get some data out of this data,

118
00:05:56,000 --> 00:05:58,000
so out of this request body

119
00:05:58,000 --> 00:06:00,000
and I'll use object de-structuring here

120
00:06:00,000 --> 00:06:03,000
and I expect to get a title, a image field,

121
00:06:03,000 --> 00:06:06,000
an address field and a description field.

122
00:06:06,000 --> 00:06:09,000
So these are the four fields which I expect to get

123
00:06:09,000 --> 00:06:13,000
on the incoming request body.

124
00:06:13,000 --> 00:06:17,000
And then we can store them in a database, for example,

125
00:06:17,000 --> 00:06:19,000
and that's what we're going to do now.