1
00:00:01,000 --> 00:00:05,000
Now, how do we add our own API routes

2
00:00:05,000 --> 00:00:08,000
to a next.js application though.

3
00:00:08,000 --> 00:00:12,000
For this, I got a brand new next.js project for you.

4
00:00:12,000 --> 00:00:14,000
You'll find it attached to this lecture.

5
00:00:14,000 --> 00:00:17,000
You can extract it, run npm install

6
00:00:17,000 --> 00:00:19,000
and then once you did that,

7
00:00:19,000 --> 00:00:21,000
npm run dev to start it.

8
00:00:21,000 --> 00:00:26,000
But this application will now not be about our pages,

9
00:00:26,000 --> 00:00:28,000
at least not the standard pages.

10
00:00:28,000 --> 00:00:29,000
Indeed, there only,

11
00:00:29,000 --> 00:00:32,000
is one page in that starting project

12
00:00:32,000 --> 00:00:34,000
and that's a dummy homepage,

13
00:00:34,000 --> 00:00:37,000
which just says "The homepage"

14
00:00:37,000 --> 00:00:40,000
Now, of course we can visit this page

15
00:00:40,000 --> 00:00:43,000
through local host 3000, but again,

16
00:00:43,000 --> 00:00:45,000
this course module will not be

17
00:00:45,000 --> 00:00:47,000
about creating pages like this.

18
00:00:47,000 --> 00:00:51,000
Instead it is about this API routes feature

19
00:00:51,000 --> 00:00:54,000
which is a feature built into next.js.

20
00:00:54,000 --> 00:00:58,000
We can add our own API endpoints to next.js

21
00:00:58,000 --> 00:01:03,000
by simply creating a new sub folder inside of pages.

22
00:01:03,000 --> 00:01:07,000
So, inside of this pages directory, we create a sub folder

23
00:01:07,000 --> 00:01:12,000
and that sub folder has to be called API.

24
00:01:12,000 --> 00:01:14,000
Now up to this point, those file

25
00:01:14,000 --> 00:01:17,000
and folder names were mostly up to you.

26
00:01:17,000 --> 00:01:19,000
This is now not up to you.

27
00:01:19,000 --> 00:01:24,000
This has to be called API because that's a special folder

28
00:01:24,000 --> 00:01:27,000
which will be recognized by next.js

29
00:01:27,000 --> 00:01:31,000
and any pages if you wanna call them like this,

30
00:01:31,000 --> 00:01:33,000
which you set up inside

31
00:01:33,000 --> 00:01:37,000
of that API folder will be treated in a special way.

32
00:01:37,000 --> 00:01:40,000
So let's add a page inside of the API folder.

33
00:01:41,000 --> 00:01:43,000
In there, you can add pages just

34
00:01:43,000 --> 00:01:46,000
as you can add them anywhere else in the pages folder.

35
00:01:46,000 --> 00:01:48,000
So you can pick names

36
00:01:48,000 --> 00:01:51,000
of your choice index.js to handle the requests

37
00:01:51,000 --> 00:01:54,000
which are just directed at /API

38
00:01:54,000 --> 00:01:59,000
or to get started here, feedback.js.

39
00:01:59,000 --> 00:02:02,000
Let's name it feedback.js.

40
00:02:02,000 --> 00:02:06,000
So now I have that feedback.js file in the API folder

41
00:02:06,000 --> 00:02:08,000
in the pages folder.

42
00:02:08,000 --> 00:02:11,000
Now that will create a special path,

43
00:02:11,000 --> 00:02:12,000
we can send requests to.

44
00:02:12,000 --> 00:02:16,000
It will allow us to send requests to our domain.

45
00:02:16,000 --> 00:02:17,000
So during development,

46
00:02:17,000 --> 00:02:22,000
that's local host 3000/API/feedback.

47
00:02:24,000 --> 00:02:26,000
This is what this will enable us to do.

48
00:02:26,000 --> 00:02:27,000
And that should make sense

49
00:02:27,000 --> 00:02:30,000
because we're in the API folder in the pages folder

50
00:02:30,000 --> 00:02:32,000
and we have a feedback.js file.

51
00:02:32,000 --> 00:02:34,000
Nonetheless, I mentioned that files

52
00:02:34,000 --> 00:02:36,000
and folders inside of API,

53
00:02:36,000 --> 00:02:40,000
so inside of this API folder would be treated

54
00:02:40,000 --> 00:02:42,000
in a special way and they will,

55
00:02:42,000 --> 00:02:44,000
inside of any file,

56
00:02:44,000 --> 00:02:46,000
inside of the API folder,

57
00:02:46,000 --> 00:02:48,000
like this feedback.js file

58
00:02:48,000 --> 00:02:52,000
we don't export a react component.

59
00:02:52,000 --> 00:02:53,000
So in the upper page files,

60
00:02:53,000 --> 00:02:58,000
we do create a react component and export that as a default.

61
00:02:59,000 --> 00:03:02,000
We don't do that in API routes.

62
00:03:02,000 --> 00:03:05,000
Instead here, we create a function,

63
00:03:05,000 --> 00:03:08,000
a function which we typically should name, handler

64
00:03:08,000 --> 00:03:11,000
because it will handle incoming requests

65
00:03:11,000 --> 00:03:15,000
and a function which will get two parameters,

66
00:03:15,000 --> 00:03:19,000
a request object, which we could name, req

67
00:03:19,000 --> 00:03:21,000
and a response object which we could name, res

68
00:03:22,000 --> 00:03:25,000
and its dysfunction which we should export

69
00:03:25,000 --> 00:03:27,000
as a default here.

70
00:03:27,000 --> 00:03:29,000
Now that will not be a react component.

71
00:03:29,000 --> 00:03:33,000
This is a standard Java script function.

72
00:03:34,000 --> 00:03:38,000
Now because this file is in the API folder,

73
00:03:38,000 --> 00:03:43,000
next.js will kind of take this function here to execute it

74
00:03:43,000 --> 00:03:48,000
for incoming requests sent to /API/feedback.

75
00:03:49,000 --> 00:03:51,000
And the interesting thing is that now

76
00:03:51,000 --> 00:03:53,000
inside of this function,

77
00:03:53,000 --> 00:03:56,000
we can not just handle get requests

78
00:03:56,000 --> 00:03:59,000
and we don't have to send back HTML code.

79
00:03:59,000 --> 00:04:01,000
Instead, this allows us to execute

80
00:04:01,000 --> 00:04:05,000
any server side code of our choice

81
00:04:05,000 --> 00:04:08,000
and that's important server side code.

82
00:04:08,000 --> 00:04:10,000
Any code we write in here,

83
00:04:10,000 --> 00:04:15,000
will never end up in any client side code bundle.

84
00:04:15,000 --> 00:04:19,000
So any code we write here will never be exposed

85
00:04:19,000 --> 00:04:22,000
to visitors of our webpage,

86
00:04:22,000 --> 00:04:24,000
just as code written and getStaticProps

87
00:04:25,000 --> 00:04:30,000
and getServerProps would never be exposed to our visitors.

88
00:04:30,000 --> 00:04:31,000
It's the same here,

89
00:04:31,000 --> 00:04:35,000
for these API routes and the code related to them.

90
00:04:35,000 --> 00:04:38,000
So here in handler, for a basic start,

91
00:04:38,000 --> 00:04:41,000
we could start sending back a response

92
00:04:41,000 --> 00:04:44,000
and we do that with help of that response object.

93
00:04:44,000 --> 00:04:49,000
Now, if you have some node.js or express.js experience,

94
00:04:49,000 --> 00:04:51,000
this will look very familiar to you.

95
00:04:51,000 --> 00:04:55,000
And indeed here we will write node.js code

96
00:04:55,000 --> 00:05:00,000
enhanced by the next.js team to look a bit like express.js.

97
00:05:00,000 --> 00:05:02,000
For example, we can send back a response

98
00:05:02,000 --> 00:05:05,000
with help of the response object here.

99
00:05:05,000 --> 00:05:06,000
And on that object,

100
00:05:06,000 --> 00:05:09,000
we can call special methods that allow us

101
00:05:09,000 --> 00:05:13,000
to send back that response and to configure that response.

102
00:05:13,000 --> 00:05:16,000
For example, the status method allows us

103
00:05:16,000 --> 00:05:19,000
to set a status code and that could be 200

104
00:05:19,000 --> 00:05:22,000
for a start to set a success status code.

105
00:05:23,000 --> 00:05:27,000
Then on that method, we can chain another method.

106
00:05:27,000 --> 00:05:31,000
So call a method on the result of this first method call,

107
00:05:31,000 --> 00:05:34,000
and that could be the JSON method to send back

108
00:05:34,000 --> 00:05:37,000
some JSON data as part of the response

109
00:05:37,000 --> 00:05:40,000
for incoming requests.

110
00:05:40,000 --> 00:05:41,000
And that is quite standard.

111
00:05:41,000 --> 00:05:44,000
As I mentioned before, for APIs,

112
00:05:44,000 --> 00:05:48,000
you typically exchange data in that JSON format

113
00:05:48,000 --> 00:05:51,000
because it's a highly machine readable

114
00:05:51,000 --> 00:05:53,000
and also human readable data format,

115
00:05:53,000 --> 00:05:55,000
which is the defacto standard

116
00:05:55,000 --> 00:05:58,000
for exchanging data with APIs.

117
00:05:59,000 --> 00:06:04,000
Now to the JSON method, we pass a JavaScript value

118
00:06:04,000 --> 00:06:08,000
like an object that will then be transformed

119
00:06:08,000 --> 00:06:10,000
into JSON automatically.

120
00:06:10,000 --> 00:06:13,000
And here we could have a message property.

121
00:06:13,000 --> 00:06:15,000
This is up to you though,

122
00:06:15,000 --> 00:06:17,000
this entire object is up to you.

123
00:06:17,000 --> 00:06:20,000
You can put any data you want in there

124
00:06:20,000 --> 00:06:23,000
and the message could be, "This works" like this.

125
00:06:25,000 --> 00:06:28,000
So by adding this line of code in that handler method

126
00:06:28,000 --> 00:06:30,000
which is exported as a default,

127
00:06:30,000 --> 00:06:33,000
this will be executed by next.js

128
00:06:33,000 --> 00:06:38,000
when we send the request to /API/feedback

129
00:06:38,000 --> 00:06:41,000
and this code will then send back a response

130
00:06:41,000 --> 00:06:43,000
clearly not a page,

131
00:06:43,000 --> 00:06:46,000
clearly not an HTML response

132
00:06:46,000 --> 00:06:48,000
but instead some JSON data

133
00:06:48,000 --> 00:06:52,000
because this response is not intended to be consumed

134
00:06:52,000 --> 00:06:54,000
by entering this in the browser.

135
00:06:54,000 --> 00:06:57,000
We will enter this URL in the browser

136
00:06:57,000 --> 00:07:00,000
for now to start working with API routes

137
00:07:00,000 --> 00:07:05,000
but that is not how we will then use them on a real page.

138
00:07:05,000 --> 00:07:07,000
It's really just to get started.

139
00:07:08,000 --> 00:07:11,000
So if you saved as feedback.js file now,

140
00:07:11,000 --> 00:07:16,000
and I then send a request to /API/feedback,

141
00:07:16,000 --> 00:07:19,000
we see our JSON our response here.

142
00:07:20,000 --> 00:07:22,000
And if we open up the network tab in the dev tools

143
00:07:22,000 --> 00:07:26,000
and we reload to take a closer look at that response,

144
00:07:26,000 --> 00:07:29,000
we see the response data there as well.

145
00:07:29,000 --> 00:07:32,000
And in the headers where we see some metadata

146
00:07:32,000 --> 00:07:35,000
about that request and response,

147
00:07:35,000 --> 00:07:39,000
we also see that in the response headers,

148
00:07:39,000 --> 00:07:42,000
the contents type was set to application JSON.

149
00:07:44,000 --> 00:07:46,000
So this is now a special kind of page

150
00:07:46,000 --> 00:07:50,000
because we created that file in the special folder.

151
00:07:50,000 --> 00:07:55,000
And that code now allows us to run our own server side code

152
00:07:55,000 --> 00:08:00,000
and to add our own application focused API

153
00:08:00,000 --> 00:08:02,000
to our overall website.

154
00:08:02,000 --> 00:08:06,000
And that allows us to add features like newsletter,

155
00:08:06,000 --> 00:08:09,000
signup, user feedback, submission,

156
00:08:09,000 --> 00:08:11,000
maybe comment submission

157
00:08:11,000 --> 00:08:13,000
or anything else you need.

158
00:08:13,000 --> 00:08:17,000
And to really be able to add such features,

159
00:08:17,000 --> 00:08:18,000
let's now dig a bit deeper

160
00:08:18,000 --> 00:08:22,000
and explore how these API routes can be used.