1 00:00:02,000 --> 00:00:03,000 So, let's now connect everything. 2 00:00:03,000 --> 00:00:07,000 And for this, in the front-end index.js file 3 00:00:07,000 --> 00:00:10,000 I now really want to send a HTTP request 4 00:00:10,000 --> 00:00:12,000 when the form is submitted. 5 00:00:12,000 --> 00:00:16,000 So for this, here, I will use that fetch function. 6 00:00:16,000 --> 00:00:20,000 And now we need the URL to which the request should be sent. 7 00:00:20,000 --> 00:00:24,000 Now, since we will target this API route 8 00:00:24,000 --> 00:00:27,000 the URL will be our current domain 9 00:00:27,000 --> 00:00:31,000 and then just /API/feedback. 10 00:00:31,000 --> 00:00:35,000 We don't need to encode our current domain here 11 00:00:35,000 --> 00:00:37,000 because if we start with a slash here 12 00:00:37,000 --> 00:00:39,000 this will automatically be appended 13 00:00:39,000 --> 00:00:43,000 as a absolute path right after our domain. 14 00:00:43,000 --> 00:00:46,000 So, it will be sent to the same domain automatically. 15 00:00:46,000 --> 00:00:50,000 And then, there to the path /API/feedback targeting 16 00:00:50,000 --> 00:00:52,000 that feedback file here. 17 00:00:53,000 --> 00:00:55,000 Now, we want to configure this request though 18 00:00:55,000 --> 00:00:59,000 and set the method to POST. 19 00:00:59,000 --> 00:01:01,000 This is very important, so that we send 20 00:01:01,000 --> 00:01:04,000 the post HTTP request because ,of course, 21 00:01:04,000 --> 00:01:06,000 we're looking for these kinds 22 00:01:06,000 --> 00:01:09,000 of requests here in our API route code. 23 00:01:10,000 --> 00:01:13,000 Then, we also need to add our body. 24 00:01:13,000 --> 00:01:16,000 So, the data that should be appended to the request. 25 00:01:16,000 --> 00:01:20,000 And we do this with the body property. 26 00:01:20,000 --> 00:01:22,000 Now, that data should be an object containing 27 00:01:22,000 --> 00:01:26,000 the entered email and feedback, and it should be an object 28 00:01:26,000 --> 00:01:28,000 with a email and a text property 29 00:01:28,000 --> 00:01:30,000 because that's what we're trying 30 00:01:30,000 --> 00:01:33,000 to access inside of our API route. 31 00:01:34,000 --> 00:01:37,000 So, here I'll then just create my request body object, 32 00:01:37,000 --> 00:01:42,000 let's say, with a email property of enteredemail 33 00:01:42,000 --> 00:01:45,000 and a text property have enteredfeedback. 34 00:01:46,000 --> 00:01:48,000 And then, that's the body I want to set here 35 00:01:48,000 --> 00:01:52,000 but not as a standard JavaScript object, 36 00:01:52,000 --> 00:01:54,000 but instead converted to JSON 37 00:01:54,000 --> 00:01:57,000 with help of that JSON stringify method. 38 00:01:58,000 --> 00:02:01,000 Now, we should also make it super clear 39 00:02:01,000 --> 00:02:05,000 that we're sending JSON data by adding some special header 40 00:02:05,000 --> 00:02:09,000 with help of the headers property, which takes an object, 41 00:02:09,000 --> 00:02:12,000 where we add the content type header, 42 00:02:12,000 --> 00:02:16,000 so a key of content type added to this header object, 43 00:02:16,000 --> 00:02:19,000 which is set to application/json. 44 00:02:20,000 --> 00:02:24,000 And my key name is wrapped between single quotes here 45 00:02:24,000 --> 00:02:27,000 because I have a special character in this property name, 46 00:02:27,000 --> 00:02:30,000 which wouldn't be allowed otherwise. 47 00:02:30,000 --> 00:02:33,000 So, now we add this object to add metadata 48 00:02:33,000 --> 00:02:36,000 to this request, which we're sending, informing the backend, 49 00:02:36,000 --> 00:02:39,000 informing the API route in the end, 50 00:02:39,000 --> 00:02:43,000 that this request will carry JSON data. 51 00:02:43,000 --> 00:02:46,000 That is required for the API routes feature 52 00:02:46,000 --> 00:02:50,000 for Next.js therefore to correctly parse 53 00:02:50,000 --> 00:02:54,000 the incoming request body, and convert JSON to JavaScript 54 00:02:54,000 --> 00:02:57,000 for us so that we can conveniently access 55 00:02:57,000 --> 00:02:59,000 it as we're doing it here. 56 00:03:01,000 --> 00:03:03,000 So, that's how we sent this request now. 57 00:03:03,000 --> 00:03:07,000 And then, here we can also listen to the response 58 00:03:07,000 --> 00:03:10,000 and extract the JSON data from that. 59 00:03:10,000 --> 00:03:13,000 And then, work with that data, 60 00:03:13,000 --> 00:03:17,000 and maybe just console lock the data for the moment. 61 00:03:17,000 --> 00:03:18,000 So, we're just sending the request 62 00:03:18,000 --> 00:03:21,000 and then, for the response, we're just extracting the data 63 00:03:21,000 --> 00:03:25,000 and then logging the data, using the then methods here 64 00:03:25,000 --> 00:03:28,000 because fetch returns a promise. 65 00:03:29,000 --> 00:03:32,000 With all that done, if you save everything, 66 00:03:32,000 --> 00:03:35,000 you should be able to go back to your page 67 00:03:35,000 --> 00:03:37,000 and then enter any data of your choice here 68 00:03:39,000 --> 00:03:41,000 and click Send Feedback. 69 00:03:42,000 --> 00:03:44,000 And, now, to find out whether this worked 70 00:03:44,000 --> 00:03:47,000 we can go to the feedback.json file. 71 00:03:47,000 --> 00:03:49,000 And, in there, you should now have an array, 72 00:03:49,000 --> 00:03:54,000 which does contain one object with a ID property, 73 00:03:54,000 --> 00:03:58,000 which is set to some automatically created ID, 74 00:03:58,000 --> 00:04:01,000 email, and text with values being equal 75 00:04:01,000 --> 00:04:04,000 to the values you just entered here. 76 00:04:04,000 --> 00:04:07,000 So, that was now updated automatically 77 00:04:07,000 --> 00:04:10,000 because of our API route code here. 78 00:04:11,000 --> 00:04:14,000 And if I send another feedback, 79 00:04:14,000 --> 00:04:19,000 like does this work again from test2@test.com, 80 00:04:19,000 --> 00:04:21,000 if I click Send Feedback and we have a look 81 00:04:21,000 --> 00:04:24,000 at feedback.json again, we see now 82 00:04:24,000 --> 00:04:27,000 that this was stored in there as well. 83 00:04:27,000 --> 00:04:30,000 And it's this array, which is being updated over time here, 84 00:04:30,000 --> 00:04:34,000 which gets longer and longer with more and more elements. 85 00:04:34,000 --> 00:04:37,000 And this is all JSON data in there which is 86 00:04:37,000 --> 00:04:40,000 why the property names are wrapped by double quotes. 87 00:04:40,000 --> 00:04:44,000 It looks like JavaScript, like a JavaScript object, 88 00:04:44,000 --> 00:04:46,000 and that's the entire idea behind JSON, 89 00:04:46,000 --> 00:04:49,000 it's this JavaScript object notation, 90 00:04:49,000 --> 00:04:51,000 but it isn't a JavaScript object. 91 00:04:51,000 --> 00:04:53,000 It indeed just looks like it. 92 00:04:53,000 --> 00:04:56,000 It is JSON formatted data 93 00:04:56,000 --> 00:05:00,000 because that's what we're doing in the feedback API route. 94 00:05:00,000 --> 00:05:03,000 And now, with that, we achieved something important. 95 00:05:03,000 --> 00:05:07,000 Now, in our next application, we are also able 96 00:05:07,000 --> 00:05:09,000 to work with submitted data, 97 00:05:09,000 --> 00:05:14,000 we're not limited to just returning pages for get requests. 98 00:05:15,000 --> 00:05:17,000 And that allows us to add features 99 00:05:17,000 --> 00:05:21,000 like newsletter signup, feedback submission, comments 100 00:05:21,000 --> 00:05:25,000 or any other kind of data that should be submitted maybe. 101 00:05:25,000 --> 00:05:28,000 And you don't have to build a separate API 102 00:05:28,000 --> 00:05:31,000 as a separate project, instead, you can easily 103 00:05:31,000 --> 00:05:34,000 add API routes your website might need 104 00:05:34,000 --> 00:05:37,000 as part of your Next.js project. 105 00:05:37,000 --> 00:05:41,000 That's why API routes are a great and very useful feature.