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