Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,591 --> 00:00:05,520
Now, how do we add our own API routes
2
00:00:05,520 --> 00:00:08,109
to a next.js application though.
3
00:00:08,109 --> 00:00:12,010
For this, I got a brand new next.js project for you.
4
00:00:12,010 --> 00:00:14,970
You'll find it attached to this lecture.
5
00:00:14,970 --> 00:00:17,980
You can extract it, run npm install
6
00:00:17,980 --> 00:00:19,540
and then once you did that,
7
00:00:19,540 --> 00:00:21,659
npm run dev to start it.
8
00:00:21,659 --> 00:00:26,270
But this application will now not be about our pages,
9
00:00:26,270 --> 00:00:28,940
at least not the standard pages.
10
00:00:28,940 --> 00:00:29,830
Indeed, there only,
11
00:00:29,830 --> 00:00:32,380
is one page in that starting project
12
00:00:32,380 --> 00:00:34,600
and that's a dummy homepage,
13
00:00:34,600 --> 00:00:37,530
which just says "The homepage"
14
00:00:37,530 --> 00:00:40,220
Now, of course we can visit this page
15
00:00:40,220 --> 00:00:43,390
through local host 3000, but again,
16
00:00:43,390 --> 00:00:45,690
this course module will not be
17
00:00:45,690 --> 00:00:47,940
about creating pages like this.
18
00:00:47,940 --> 00:00:51,210
Instead it is about this API routes feature
19
00:00:51,210 --> 00:00:54,260
which is a feature built into next.js.
20
00:00:54,260 --> 00:00:58,600
We can add our own API endpoints to next.js
21
00:00:58,600 --> 00:01:03,190
by simply creating a new sub folder inside of pages.
22
00:01:03,190 --> 00:01:07,810
So, inside of this pages directory, we create a sub folder
23
00:01:07,810 --> 00:01:12,370
and that sub folder has to be called API.
24
00:01:12,370 --> 00:01:14,950
Now up to this point, those file
25
00:01:14,950 --> 00:01:17,415
and folder names were mostly up to you.
26
00:01:17,415 --> 00:01:19,420
This is now not up to you.
27
00:01:19,420 --> 00:01:24,420
This has to be called API because that's a special folder
28
00:01:24,510 --> 00:01:27,860
which will be recognized by next.js
29
00:01:27,860 --> 00:01:31,560
and any pages if you wanna call them like this,
30
00:01:31,560 --> 00:01:33,130
which you set up inside
31
00:01:33,130 --> 00:01:37,490
of that API folder will be treated in a special way.
32
00:01:37,490 --> 00:01:40,573
So let's add a page inside of the API folder.
33
00:01:41,978 --> 00:01:43,680
In there, you can add pages just
34
00:01:43,680 --> 00:01:46,890
as you can add them anywhere else in the pages folder.
35
00:01:46,890 --> 00:01:48,020
So you can pick names
36
00:01:48,020 --> 00:01:51,580
of your choice index.js to handle the requests
37
00:01:51,580 --> 00:01:54,650
which are just directed at /API
38
00:01:54,650 --> 00:01:59,140
or to get started here, feedback.js.
39
00:01:59,140 --> 00:02:02,110
Let's name it feedback.js.
40
00:02:02,110 --> 00:02:06,260
So now I have that feedback.js file in the API folder
41
00:02:06,260 --> 00:02:08,070
in the pages folder.
42
00:02:08,070 --> 00:02:11,050
Now that will create a special path,
43
00:02:11,050 --> 00:02:12,860
we can send requests to.
44
00:02:12,860 --> 00:02:16,170
It will allow us to send requests to our domain.
45
00:02:16,170 --> 00:02:17,690
So during development,
46
00:02:17,690 --> 00:02:22,690
that's local host 3000/API/feedback.
47
00:02:24,010 --> 00:02:26,170
This is what this will enable us to do.
48
00:02:26,170 --> 00:02:27,540
And that should make sense
49
00:02:27,540 --> 00:02:30,130
because we're in the API folder in the pages folder
50
00:02:30,130 --> 00:02:32,325
and we have a feedback.js file.
51
00:02:32,325 --> 00:02:34,960
Nonetheless, I mentioned that files
52
00:02:34,960 --> 00:02:36,786
and folders inside of API,
53
00:02:36,786 --> 00:02:40,030
so inside of this API folder would be treated
54
00:02:40,030 --> 00:02:42,530
in a special way and they will,
55
00:02:42,530 --> 00:02:44,350
inside of any file,
56
00:02:44,350 --> 00:02:46,040
inside of the API folder,
57
00:02:46,040 --> 00:02:48,560
like this feedback.js file
58
00:02:48,560 --> 00:02:52,440
we don't export a react component.
59
00:02:52,440 --> 00:02:53,860
So in the upper page files,
60
00:02:53,860 --> 00:02:58,860
we do create a react component and export that as a default.
61
00:02:59,120 --> 00:03:02,400
We don't do that in API routes.
62
00:03:02,400 --> 00:03:05,490
Instead here, we create a function,
63
00:03:05,490 --> 00:03:08,810
a function which we typically should name, handler
64
00:03:08,810 --> 00:03:11,930
because it will handle incoming requests
65
00:03:11,930 --> 00:03:15,890
and a function which will get two parameters,
66
00:03:15,890 --> 00:03:19,120
a request object, which we could name, req
67
00:03:19,120 --> 00:03:21,640
and a response object which we could name, res
68
00:03:22,690 --> 00:03:25,300
and its dysfunction which we should export
69
00:03:25,300 --> 00:03:27,410
as a default here.
70
00:03:27,410 --> 00:03:29,980
Now that will not be a react component.
71
00:03:29,980 --> 00:03:33,113
This is a standard Java script function.
72
00:03:34,140 --> 00:03:38,120
Now because this file is in the API folder,
73
00:03:38,120 --> 00:03:43,120
next.js will kind of take this function here to execute it
74
00:03:43,560 --> 00:03:48,560
for incoming requests sent to /API/feedback.
75
00:03:49,210 --> 00:03:51,250
And the interesting thing is that now
76
00:03:51,250 --> 00:03:53,190
inside of this function,
77
00:03:53,190 --> 00:03:56,060
we can not just handle get requests
78
00:03:56,060 --> 00:03:59,210
and we don't have to send back HTML code.
79
00:03:59,210 --> 00:04:01,750
Instead, this allows us to execute
80
00:04:01,750 --> 00:04:05,290
any server side code of our choice
81
00:04:05,290 --> 00:04:08,670
and that's important server side code.
82
00:04:08,670 --> 00:04:10,750
Any code we write in here,
83
00:04:10,750 --> 00:04:15,750
will never end up in any client side code bundle.
84
00:04:15,840 --> 00:04:19,459
So any code we write here will never be exposed
85
00:04:19,459 --> 00:04:22,120
to visitors of our webpage,
86
00:04:22,120 --> 00:04:24,630
just as code written and getStaticProps
87
00:04:25,570 --> 00:04:30,080
and getServerProps would never be exposed to our visitors.
88
00:04:30,080 --> 00:04:31,270
It's the same here,
89
00:04:31,270 --> 00:04:35,130
for these API routes and the code related to them.
90
00:04:35,130 --> 00:04:38,210
So here in handler, for a basic start,
91
00:04:38,210 --> 00:04:41,330
we could start sending back a response
92
00:04:41,330 --> 00:04:44,770
and we do that with help of that response object.
93
00:04:44,770 --> 00:04:49,090
Now, if you have some node.js or express.js experience,
94
00:04:49,090 --> 00:04:51,620
this will look very familiar to you.
95
00:04:51,620 --> 00:04:55,250
And indeed here we will write node.js code
96
00:04:55,250 --> 00:05:00,250
enhanced by the next.js team to look a bit like express.js.
97
00:05:00,470 --> 00:05:02,660
For example, we can send back a response
98
00:05:02,660 --> 00:05:05,130
with help of the response object here.
99
00:05:05,130 --> 00:05:06,250
And on that object,
100
00:05:06,250 --> 00:05:09,210
we can call special methods that allow us
101
00:05:09,210 --> 00:05:13,680
to send back that response and to configure that response.
102
00:05:13,680 --> 00:05:16,000
For example, the status method allows us
103
00:05:16,000 --> 00:05:19,400
to set a status code and that could be 200
104
00:05:19,400 --> 00:05:22,573
for a start to set a success status code.
105
00:05:23,540 --> 00:05:27,490
Then on that method, we can chain another method.
106
00:05:27,490 --> 00:05:31,400
So call a method on the result of this first method call,
107
00:05:31,400 --> 00:05:34,380
and that could be the JSON method to send back
108
00:05:34,380 --> 00:05:37,740
some JSON data as part of the response
109
00:05:37,740 --> 00:05:40,180
for incoming requests.
110
00:05:40,180 --> 00:05:41,860
And that is quite standard.
111
00:05:41,860 --> 00:05:44,470
As I mentioned before, for APIs,
112
00:05:44,470 --> 00:05:48,900
you typically exchange data in that JSON format
113
00:05:48,900 --> 00:05:51,100
because it's a highly machine readable
114
00:05:51,100 --> 00:05:53,590
and also human readable data format,
115
00:05:53,590 --> 00:05:55,820
which is the defacto standard
116
00:05:55,820 --> 00:05:58,723
for exchanging data with APIs.
117
00:05:59,890 --> 00:06:04,560
Now to the JSON method, we pass a JavaScript value
118
00:06:04,560 --> 00:06:08,480
like an object that will then be transformed
119
00:06:08,480 --> 00:06:10,900
into JSON automatically.
120
00:06:10,900 --> 00:06:13,970
And here we could have a message property.
121
00:06:13,970 --> 00:06:15,400
This is up to you though,
122
00:06:15,400 --> 00:06:17,280
this entire object is up to you.
123
00:06:17,280 --> 00:06:20,250
You can put any data you want in there
124
00:06:20,250 --> 00:06:23,933
and the message could be, "This works" like this.
125
00:06:25,040 --> 00:06:28,280
So by adding this line of code in that handler method
126
00:06:28,280 --> 00:06:30,640
which is exported as a default,
127
00:06:30,640 --> 00:06:33,900
this will be executed by next.js
128
00:06:33,900 --> 00:06:38,250
when we send the request to /API/feedback
129
00:06:38,250 --> 00:06:41,900
and this code will then send back a response
130
00:06:41,900 --> 00:06:43,650
clearly not a page,
131
00:06:43,650 --> 00:06:46,410
clearly not an HTML response
132
00:06:46,410 --> 00:06:48,770
but instead some JSON data
133
00:06:48,770 --> 00:06:52,730
because this response is not intended to be consumed
134
00:06:52,730 --> 00:06:54,850
by entering this in the browser.
135
00:06:54,850 --> 00:06:57,470
We will enter this URL in the browser
136
00:06:57,470 --> 00:07:00,890
for now to start working with API routes
137
00:07:00,890 --> 00:07:05,430
but that is not how we will then use them on a real page.
138
00:07:05,430 --> 00:07:07,513
It's really just to get started.
139
00:07:08,420 --> 00:07:11,960
So if you saved as feedback.js file now,
140
00:07:11,960 --> 00:07:16,260
and I then send a request to /API/feedback,
141
00:07:16,260 --> 00:07:19,073
we see our JSON our response here.
142
00:07:20,110 --> 00:07:22,870
And if we open up the network tab in the dev tools
143
00:07:22,870 --> 00:07:26,770
and we reload to take a closer look at that response,
144
00:07:26,770 --> 00:07:29,530
we see the response data there as well.
145
00:07:29,530 --> 00:07:32,650
And in the headers where we see some metadata
146
00:07:32,650 --> 00:07:35,260
about that request and response,
147
00:07:35,260 --> 00:07:39,350
we also see that in the response headers,
148
00:07:39,350 --> 00:07:42,823
the contents type was set to application JSON.
149
00:07:44,180 --> 00:07:46,950
So this is now a special kind of page
150
00:07:46,950 --> 00:07:50,450
because we created that file in the special folder.
151
00:07:50,450 --> 00:07:55,330
And that code now allows us to run our own server side code
152
00:07:55,330 --> 00:08:00,330
and to add our own application focused API
153
00:08:00,340 --> 00:08:02,450
to our overall website.
154
00:08:02,450 --> 00:08:06,150
And that allows us to add features like newsletter,
155
00:08:06,150 --> 00:08:09,190
signup, user feedback, submission,
156
00:08:09,190 --> 00:08:11,550
maybe comment submission
157
00:08:11,550 --> 00:08:13,840
or anything else you need.
158
00:08:13,840 --> 00:08:17,200
And to really be able to add such features,
159
00:08:17,200 --> 00:08:18,850
let's now dig a bit deeper
160
00:08:18,850 --> 00:08:22,253
and explore how these API routes can be used.
12391
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.