1 00:00:02,000 --> 00:00:04,000 Now we know about API routes, 2 00:00:04,000 --> 00:00:07,000 including dynamic API routes. 3 00:00:07,000 --> 00:00:08,000 Now it is worth a note that 4 00:00:08,000 --> 00:00:11,000 there are some alternatives to how we name 5 00:00:11,000 --> 00:00:15,000 and structure our files inside of the API folder. 6 00:00:15,000 --> 00:00:18,000 And those alternatives are equivalent 7 00:00:18,000 --> 00:00:20,000 to the different approaches we can use 8 00:00:20,000 --> 00:00:22,000 for regular pages. 9 00:00:22,000 --> 00:00:27,000 For example, you can also have catch-all dynamic API routes 10 00:00:28,000 --> 00:00:31,000 by adding free dots in front of any placeholder name 11 00:00:31,000 --> 00:00:33,000 of your choice. 12 00:00:33,000 --> 00:00:38,000 This will then not just handle requests to /API/some value, 13 00:00:38,000 --> 00:00:42,000 but also to more segments you might have. 14 00:00:42,000 --> 00:00:45,000 Equivalent to what you learned about regular pages 15 00:00:45,000 --> 00:00:48,000 and catch-all pages. 16 00:00:48,000 --> 00:00:51,000 Now we don't need a catch-all dynamic API route here 17 00:00:51,000 --> 00:00:53,000 but it is worth knowing about it. 18 00:00:53,000 --> 00:00:55,000 It's all important to understand 19 00:00:55,000 --> 00:01:00,000 how Next.js prioritizes these different files. 20 00:01:00,000 --> 00:01:03,000 If we send the request to /API/feedback, 21 00:01:03,000 --> 00:01:08,000 it's decode into feedback.js file, it will be executed. 22 00:01:08,000 --> 00:01:11,000 Now that is not necessarily obvious 23 00:01:11,000 --> 00:01:13,000 because we have this dynamic API route. 24 00:01:13,000 --> 00:01:18,000 So it could also be possible that requests to /API/feedback 25 00:01:18,000 --> 00:01:23,000 are consumed by this file because feedback is simply treated 26 00:01:23,000 --> 00:01:27,000 as a concrete value for this feedback ID placeholder. 27 00:01:27,000 --> 00:01:32,000 But Next.js is smart just as it is for regular pages. 28 00:01:32,000 --> 00:01:37,000 And if there is a more specific page for a given path value, 29 00:01:37,000 --> 00:01:40,000 so since we have a feedback.js file in this case 30 00:01:40,000 --> 00:01:42,000 it will use that more specific file 31 00:01:42,000 --> 00:01:45,000 which makes more sense for this kind of path 32 00:01:45,000 --> 00:01:48,000 than the more generic dynamic file. 33 00:01:48,000 --> 00:01:52,000 /API some value on the other hand would trigger 34 00:01:52,000 --> 00:01:56,000 the code in the dynamic API route. 35 00:01:56,000 --> 00:01:58,000 So that's just worth knowing. 36 00:01:58,000 --> 00:02:00,000 It automatically works correctly here 37 00:02:00,000 --> 00:02:02,000 but it is important to be aware of the fact 38 00:02:02,000 --> 00:02:06,000 that Next.js will do this prioritization for you. 39 00:02:08,000 --> 00:02:10,000 Now, another important thing to know 40 00:02:10,000 --> 00:02:12,000 is that you have some flexibility 41 00:02:12,000 --> 00:02:15,000 regarding how you structure your files. 42 00:02:15,000 --> 00:02:19,000 You can add a feedback.js file in the API folder 43 00:02:19,000 --> 00:02:24,000 to support requests to /API/feedback. 44 00:02:24,000 --> 00:02:27,000 Alternatively, just as with the regular pages, 45 00:02:27,000 --> 00:02:31,000 you could also add a feedback sub folder in the API folder 46 00:02:31,000 --> 00:02:34,000 and then move to file in there 47 00:02:34,000 --> 00:02:38,000 and rename it to index.js. 48 00:02:38,000 --> 00:02:40,000 And here vscode is asking me 49 00:02:40,000 --> 00:02:43,000 whether it should automatically update all imports 50 00:02:43,000 --> 00:02:45,000 that pointed at this file, 51 00:02:45,000 --> 00:02:46,000 and I will say, yes. 52 00:02:46,000 --> 00:02:49,000 If you don't get the prompt or you chose, no, 53 00:02:49,000 --> 00:02:54,000 you should manually update those import puffs. 54 00:02:54,000 --> 00:02:56,000 So that is the alternative. 55 00:02:56,000 --> 00:02:59,000 A file named index.js in the feedback folder 56 00:02:59,000 --> 00:03:02,000 in the API folder is the equivalent 57 00:03:02,000 --> 00:03:06,000 to having a feedback.js file inside of the API folder, 58 00:03:06,000 --> 00:03:09,000 just as it works for regular pages. 59 00:03:09,000 --> 00:03:13,000 We can also move our feedback ID js file in there. 60 00:03:13,000 --> 00:03:15,000 But if we do that, 61 00:03:15,000 --> 00:03:18,000 that of course also changes the way our API works. 62 00:03:18,000 --> 00:03:21,000 Previously, since feedback ID, 63 00:03:21,000 --> 00:03:26,000 this dynamic API route was directly in the API folder 64 00:03:26,000 --> 00:03:30,000 previously /API some value 65 00:03:30,000 --> 00:03:34,000 triggered the code in this feedback ID file. 66 00:03:34,000 --> 00:03:36,000 Now, since we're in a feedback sub folder, 67 00:03:36,000 --> 00:03:41,000 it's actually /API/feedback/some value 68 00:03:41,000 --> 00:03:43,000 that triggers the code in here. 69 00:03:44,000 --> 00:03:48,000 Now that is actually a path that makes more sense to me. 70 00:03:48,000 --> 00:03:49,000 It's more descriptive, 71 00:03:49,000 --> 00:03:52,000 it's clearer that some requests sent 72 00:03:52,000 --> 00:03:56,000 to /API/feedback/some value 73 00:03:56,000 --> 00:03:59,000 should fetch more details for a single feedback 74 00:03:59,000 --> 00:04:03,000 than if we have just /API/F1. 75 00:04:03,000 --> 00:04:06,000 That doesn't tell us that it's about fetching feedback data 76 00:04:06,000 --> 00:04:09,000 if we just look at this kind of path. 77 00:04:09,000 --> 00:04:11,000 And hence it will keep this structure 78 00:04:11,000 --> 00:04:14,000 of having these square bracket feedback ID file 79 00:04:14,000 --> 00:04:18,000 inside of the feedback folder inside of the API folder. 80 00:04:18,000 --> 00:04:21,000 However, that means that in the index.js file 81 00:04:21,000 --> 00:04:24,000 in the feedback folder, in the regular pages. 82 00:04:24,000 --> 00:04:26,000 So in the feedback page component, 83 00:04:26,000 --> 00:04:29,000 we also need to update this URL 84 00:04:29,000 --> 00:04:34,000 and send our request to /API/feedback/some ID, 85 00:04:35,000 --> 00:04:38,000 because I changed that structure in the API's folder. 86 00:04:39,000 --> 00:04:42,000 And now it looks like I broke some imports as well. 87 00:04:42,000 --> 00:04:45,000 Yes, here we should import from the index file. 88 00:04:47,000 --> 00:04:48,000 And now that works again. 89 00:04:49,000 --> 00:04:52,000 So if I now reload, that all works, 90 00:04:52,000 --> 00:04:54,000 that works, looking good. 91 00:04:56,000 --> 00:04:59,000 So that is how you can also structure your files 92 00:04:59,000 --> 00:05:03,000 and folders in the API folder, in the pages folder. 93 00:05:03,000 --> 00:05:06,000 It essentially works just as it does 94 00:05:06,000 --> 00:05:07,000 for regular pages.