Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,040 --> 00:00:05,260
Now what are API routes?
2
00:00:05,260 --> 00:00:08,430
It's important to understand and keep
3
00:00:08,430 --> 00:00:11,950
in mind that some websites which we're building
4
00:00:11,950 --> 00:00:16,880
don't just need HTML pages that are being served
5
00:00:16,880 --> 00:00:19,708
back to visitors upon requests.
6
00:00:19,708 --> 00:00:22,927
That of course is something which most websites need
7
00:00:22,927 --> 00:00:27,480
but it's not the only thing that can be needed by a website.
8
00:00:27,480 --> 00:00:29,880
You might, for example, have a feature
9
00:00:29,880 --> 00:00:33,916
on your website that allows users to submit feedback
10
00:00:33,916 --> 00:00:36,548
or sign up for a newsletter.
11
00:00:36,548 --> 00:00:39,580
Now, when a user clicks such a button
12
00:00:39,580 --> 00:00:42,564
to for example sign up for a newsletter,
13
00:00:42,564 --> 00:00:47,400
you don't necessarily want to show a different page.
14
00:00:47,400 --> 00:00:50,520
I mean you could show a confirmation page
15
00:00:50,520 --> 00:00:52,530
that it was successful,
16
00:00:52,530 --> 00:00:56,120
but you could also just show a little info pop-up
17
00:00:56,120 --> 00:00:59,360
or a banner on the existing page.
18
00:00:59,360 --> 00:01:01,900
But even if we ignore what we show
19
00:01:01,900 --> 00:01:04,700
let's think about what happens behind the scenes
20
00:01:04,700 --> 00:01:07,920
when we sign up for a newsletter.
21
00:01:07,920 --> 00:01:12,070
Then we need to send data to some server
22
00:01:12,070 --> 00:01:16,120
to some computer to then store that entered newsletter
23
00:01:16,120 --> 00:01:19,000
email address in some database.
24
00:01:19,000 --> 00:01:21,410
And that request which is being sent there
25
00:01:21,410 --> 00:01:24,070
is not about fetching a site.
26
00:01:24,070 --> 00:01:26,340
It is about storing data.
27
00:01:26,340 --> 00:01:28,950
So it's kind of the other direction.
28
00:01:28,950 --> 00:01:32,290
We don't want to get a HTML page.
29
00:01:32,290 --> 00:01:36,110
Instead. We want to send that user entered data
30
00:01:36,110 --> 00:01:38,310
to some database.
31
00:01:38,310 --> 00:01:41,210
And that is what we use APIs for
32
00:01:41,210 --> 00:01:44,520
Application Programming Interfaces.
33
00:01:44,520 --> 00:01:47,330
There are different kinds of APIs we could build.
34
00:01:47,330 --> 00:01:51,690
REST APIs are the most popular form of APIs.
35
00:01:51,690 --> 00:01:55,050
And the idea is always the same that we have
36
00:01:55,050 --> 00:01:59,510
a web server that exposes certain URLs.
37
00:01:59,510 --> 00:02:02,410
Just as we did it thus far in the course
38
00:02:02,410 --> 00:02:06,315
but those you are URLs are not about getting requests
39
00:02:06,315 --> 00:02:08,936
and sending back HTML data,
40
00:02:08,936 --> 00:02:11,940
but they are about accepting some data
41
00:02:11,940 --> 00:02:13,920
and then sending back responses
42
00:02:13,920 --> 00:02:18,650
with any kind of data, not necessarily HTML.
43
00:02:18,650 --> 00:02:22,520
Specifically JSON, JavaScript Object Notation,
44
00:02:22,520 --> 00:02:26,253
would be the most common format for exchanging such data.
45
00:02:27,160 --> 00:02:32,120
So API routes are special kind of you are URLs,
46
00:02:32,120 --> 00:02:35,830
which you can add to your Next.js application,
47
00:02:35,830 --> 00:02:39,640
which are not about getting a standard browser request
48
00:02:39,640 --> 00:02:43,070
and sending back a pre-rendered HTML page,
49
00:02:43,070 --> 00:02:46,690
but which are instead about getting data, using data,
50
00:02:46,690 --> 00:02:49,370
maybe storing data in some database
51
00:02:49,370 --> 00:02:53,340
and sending back data in any form of your choice.
52
00:02:53,340 --> 00:02:57,219
So in the end API routes, this Next.js feature
53
00:02:57,219 --> 00:03:01,600
is a feature that allows us to build a API,
54
00:03:01,600 --> 00:03:06,600
a REST API if you will, as part of our Next.js app.
55
00:03:07,250 --> 00:03:11,234
And it would, for example, allow us to support URLs
56
00:03:11,234 --> 00:03:16,234
or PRURLs after our domain, like this /apifeedback
57
00:03:16,269 --> 00:03:21,269
and then accepting different kinds of HTTP requests.
58
00:03:21,360 --> 00:03:26,360
Not just get requests as all our page routes did thus far
59
00:03:27,270 --> 00:03:32,240
but also post or put or delete requests, whatever you need.
60
00:03:32,240 --> 00:03:36,010
And then depending on which HTTP method was used
61
00:03:36,010 --> 00:03:40,230
for which path, different actions could be triggered.
62
00:03:40,230 --> 00:03:42,812
If, for example, for a post request send to
63
00:03:42,812 --> 00:03:47,450
/api/feedback, we might expect some data
64
00:03:47,450 --> 00:03:50,221
to be sent along with that incoming request
65
00:03:50,221 --> 00:03:53,400
some feedback data entered by a user.
66
00:03:53,400 --> 00:03:56,880
And then when that request hits our API
67
00:03:56,880 --> 00:03:59,517
we extract that data from the request
68
00:03:59,517 --> 00:04:02,190
and store it in a database.
69
00:04:02,190 --> 00:04:05,660
If the get request reaches that same URL,
70
00:04:05,660 --> 00:04:08,650
we instead might want to fetch data from a database
71
00:04:08,650 --> 00:04:13,300
and send that back but not as an HTML page
72
00:04:13,300 --> 00:04:17,623
but instead as raw data in that JSON format.
73
00:04:18,779 --> 00:04:23,780
And those API routes, therefore don't exist to be entered
74
00:04:24,050 --> 00:04:29,050
in the URL typically, but instead to be triggered
75
00:04:29,097 --> 00:04:33,430
via JavaScript code, via Ajax requests.
76
00:04:33,430 --> 00:04:36,180
So we as a developer add certain code
77
00:04:36,180 --> 00:04:40,680
to our page that sends these behind the scenes requests
78
00:04:40,680 --> 00:04:45,680
you could say to our API to store or fetch data.
79
00:04:45,866 --> 00:04:48,740
And that is actually something we already did
80
00:04:48,740 --> 00:04:49,860
in this course.
81
00:04:49,860 --> 00:04:53,730
When we worked with Firebase, when we sent requests
82
00:04:53,730 --> 00:04:58,730
to Firebase, then there, we talked to the Firebase API.
83
00:05:00,290 --> 00:05:03,010
We sent requests to certain URLs
84
00:05:03,010 --> 00:05:06,170
for restoring data and for getting data.
85
00:05:06,170 --> 00:05:10,770
And these URLs. These Firebase URLs.
86
00:05:10,770 --> 00:05:12,700
We didn't enter them into browser.
87
00:05:12,700 --> 00:05:17,010
Instead we send requests through our JavaScript code.
88
00:05:17,010 --> 00:05:19,170
No matter if that code then runs
89
00:05:19,170 --> 00:05:21,620
on the client or on the server
90
00:05:21,620 --> 00:05:25,050
we talked to that Firebase API.
91
00:05:25,050 --> 00:05:29,230
And now it is API routes' feature is about letting us
92
00:05:29,230 --> 00:05:32,620
to find our own API end points
93
00:05:32,620 --> 00:05:35,893
as part of our Next.js application.
7495
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.