1 00:00:02,000 --> 00:00:03,000 So now we all to learn about 2 00:00:03,000 --> 00:00:06,000 those nested folders to construct 3 00:00:06,000 --> 00:00:09,000 nested more complex puffs, 4 00:00:09,000 --> 00:00:13,000 or as an alternative to having a file off the same name, 5 00:00:13,000 --> 00:00:15,000 but maybe you all remember 6 00:00:15,000 --> 00:00:20,000 that last use case down there with the square brackets. 7 00:00:20,000 --> 00:00:24,000 This can be used to have a dynamic path 8 00:00:24,000 --> 00:00:26,000 with a dynamic path segment. 9 00:00:26,000 --> 00:00:31,000 And that's another key feature Next.js offers to us. 10 00:00:31,000 --> 00:00:34,000 Let's say here in this very simple dummy application 11 00:00:34,000 --> 00:00:38,000 we are working on in our portfolio folder, 12 00:00:38,000 --> 00:00:40,000 we don't just want to have the route path 13 00:00:40,000 --> 00:00:44,000 forward slash portfolio and the list path, 14 00:00:44,000 --> 00:00:46,000 but we also have different portfolio items 15 00:00:46,000 --> 00:00:49,000 different portfolio projects let's say, 16 00:00:49,000 --> 00:00:53,000 and those projects might have different ideas or slugs, 17 00:00:53,000 --> 00:00:57,000 and we want to load the different data in the same kind 18 00:00:57,000 --> 00:01:02,000 of component for those different slugs or IDs. 19 00:01:02,000 --> 00:01:04,000 That's exactly where we would create 20 00:01:04,000 --> 00:01:07,000 such a dynamic route component. 21 00:01:07,000 --> 00:01:11,000 And here the naming pattern is always exactly the same, 22 00:01:11,000 --> 00:01:13,000 you use square brackets, 23 00:01:13,000 --> 00:01:15,000 and then of course still .js 24 00:01:15,000 --> 00:01:18,000 because it's still a JavaScript file. 25 00:01:18,000 --> 00:01:20,000 And inside of the square brackets, 26 00:01:20,000 --> 00:01:23,000 any identifier of your choice. 27 00:01:23,000 --> 00:01:24,000 So this is up to you, 28 00:01:24,000 --> 00:01:26,000 it doesn't have to be ID, 29 00:01:26,000 --> 00:01:29,000 it just very often will be some kind of ID, 30 00:01:29,000 --> 00:01:31,000 but that's up to you, 31 00:01:31,000 --> 00:01:33,000 it could, for example, be project ID., 32 00:01:33,000 --> 00:01:35,000 just to really emphasize that this 33 00:01:35,000 --> 00:01:38,000 can be any term you want. 34 00:01:38,000 --> 00:01:40,000 The square brackets matter though, 35 00:01:40,000 --> 00:01:43,000 because those tell Next.js 36 00:01:43,000 --> 00:01:45,000 that here we don't wanna have 37 00:01:45,000 --> 00:01:48,000 slash portfolio, slash project ID, 38 00:01:48,000 --> 00:01:51,000 but that instead this is a placeholder 39 00:01:51,000 --> 00:01:55,000 for any kind of value which we then will have access 40 00:01:55,000 --> 00:01:59,000 to in the component to load different kinds of data, 41 00:01:59,000 --> 00:02:02,000 but that will be the next step. 42 00:02:02,000 --> 00:02:03,000 So therefore let's know save this, 43 00:02:03,000 --> 00:02:06,000 and even though this might look strange, 44 00:02:06,000 --> 00:02:09,000 this is a perfectly valid file name. 45 00:02:09,000 --> 00:02:12,000 And now in here we can create a new function, 46 00:02:12,000 --> 00:02:16,000 the portfolio project page function maybe, 47 00:02:16,000 --> 00:02:20,000 where we returned and number div where we say 48 00:02:20,000 --> 00:02:24,000 the portfolio project page. 49 00:02:24,000 --> 00:02:26,000 And then just as before we simply 50 00:02:26,000 --> 00:02:30,000 export this page component. 51 00:02:31,000 --> 00:02:35,000 Now how can we load this component or this page? 52 00:02:35,000 --> 00:02:37,000 Well, it's a place holder as I said, 53 00:02:37,000 --> 00:02:40,000 and it's in the portfolio folder, 54 00:02:40,000 --> 00:02:41,000 hence what we can do, 55 00:02:41,000 --> 00:02:45,000 is we can enter portfolio slash, 56 00:02:45,000 --> 00:02:47,000 and then any value of your choice, 57 00:02:47,000 --> 00:02:49,000 for example something 58 00:02:49,000 --> 00:02:51,000 and you see the portfolio project page. 59 00:02:51,000 --> 00:02:55,000 Also if we use slash one instead of slash something, 60 00:02:55,000 --> 00:02:57,000 or slash hello, 61 00:02:57,000 --> 00:02:59,000 so whatever value we enter here, 62 00:02:59,000 --> 00:03:03,000 this is valid because here we defined 63 00:03:03,000 --> 00:03:05,000 that we wanna accept any value that 64 00:03:05,000 --> 00:03:09,000 we just have a placeholder here and now we're filling 65 00:03:09,000 --> 00:03:13,000 in that concrete value for that placeholder. 66 00:03:13,000 --> 00:03:16,000 Please also notice though, that slash list 67 00:03:16,000 --> 00:03:18,000 still loads the list page, 68 00:03:18,000 --> 00:03:23,000 since Next.js is smart and checks your other files as well. 69 00:03:24,000 --> 00:03:28,000 So if it sees that a value could be treated as a value 70 00:03:28,000 --> 00:03:29,000 for this placeholder, 71 00:03:29,000 --> 00:03:32,000 it all checks if you maybe have a more 72 00:03:32,000 --> 00:03:35,000 concrete file for that exact value. 73 00:03:35,000 --> 00:03:39,000 So for a slash list after slash portfolio, 74 00:03:39,000 --> 00:03:43,000 it sees that there is a list file in the portfolio folder 75 00:03:43,000 --> 00:03:47,000 and it prioritize a that file over this dynamic file. 76 00:03:47,000 --> 00:03:49,000 And that's a great behavior, 77 00:03:49,000 --> 00:03:51,000 because it means that you can have 78 00:03:51,000 --> 00:03:54,000 static predefined route page files, 79 00:03:54,000 --> 00:03:57,000 next to dynamic ones like this one. 80 00:03:57,000 --> 00:04:00,000 But what can we now do with that file? 81 00:04:00,000 --> 00:04:02,000 It's a placeholder, 82 00:04:02,000 --> 00:04:05,000 but what's the real benefit we get 83 00:04:05,000 --> 00:04:07,000 by using such a placeholder. 84 00:04:08,000 --> 00:04:10,000 As I said a common scenario 85 00:04:10,000 --> 00:04:13,000 for using such a dynamic page would be, 86 00:04:13,000 --> 00:04:15,000 that you have the same kind of page 87 00:04:15,000 --> 00:04:18,000 that should be loaded for different pieces of data, 88 00:04:18,000 --> 00:04:20,000 different products in our shop 89 00:04:20,000 --> 00:04:22,000 or different blog posts in a blog, 90 00:04:22,000 --> 00:04:25,000 or like in this case, different projects 91 00:04:25,000 --> 00:04:28,000 we wanna show on our portfolio page, for example. 92 00:04:29,000 --> 00:04:33,000 So therefore now inside of this page component, 93 00:04:33,000 --> 00:04:36,000 we typically now wanna use the concrete value 94 00:04:36,000 --> 00:04:37,000 that was entered, 95 00:04:37,000 --> 00:04:40,000 so the concrete project ID here, 96 00:04:40,000 --> 00:04:43,000 and then probably reach out to some database 97 00:04:43,000 --> 00:04:44,000 or something like this, 98 00:04:44,000 --> 00:04:46,000 fetch data from there, 99 00:04:46,000 --> 00:04:48,000 and then use that concrete data 100 00:04:48,000 --> 00:04:52,000 in this component to bring that data to the screen.