1 00:00:02,000 --> 00:00:05,000 Creating the detail page like this works, 2 00:00:05,000 --> 00:00:07,000 until we realize that we probably would have 3 00:00:07,000 --> 00:00:11,000 more than one news item on our news site. 4 00:00:11,000 --> 00:00:14,000 It would be very realistic that index.js 5 00:00:14,000 --> 00:00:18,000 and the news folder should output a list of news items. 6 00:00:18,000 --> 00:00:21,000 And then we can click those individual items 7 00:00:21,000 --> 00:00:23,000 and then take into the detailed pages 8 00:00:23,000 --> 00:00:28,000 with the concrete content for the news item we selected. 9 00:00:28,000 --> 00:00:31,000 So we use the same page over and over again 10 00:00:31,000 --> 00:00:34,000 for different news items for different content. 11 00:00:34,000 --> 00:00:38,000 We would probably fetch the concrete content 12 00:00:38,000 --> 00:00:41,000 from some database when a user visits this detail page 13 00:00:41,000 --> 00:00:43,000 and then display it on the screen. 14 00:00:43,000 --> 00:00:46,000 So, it's the same component technically 15 00:00:46,000 --> 00:00:48,000 but with different content. 16 00:00:48,000 --> 00:00:50,000 And that's of course a totally realistic, 17 00:00:50,000 --> 00:00:53,000 I would even say very common scenario. 18 00:00:53,000 --> 00:00:56,000 So hard coding, the identifier, 19 00:00:56,000 --> 00:00:58,000 like something dash important 20 00:00:58,000 --> 00:01:01,000 like this in the file name is not very realistic. 21 00:01:01,000 --> 00:01:05,000 Instead, we wanna create a so-called dynamic page 22 00:01:05,000 --> 00:01:08,000 where the path segment to concrete value 23 00:01:08,000 --> 00:01:10,000 in the path can be dynamic, 24 00:01:10,000 --> 00:01:12,000 so that it's not just slash news, 25 00:01:12,000 --> 00:01:14,000 slash something important, 26 00:01:14,000 --> 00:01:16,000 but also slash something else 27 00:01:16,000 --> 00:01:21,000 or slash this course is great, whatever. 28 00:01:22,000 --> 00:01:25,000 So then this would be the identifier of a news item 29 00:01:25,000 --> 00:01:27,000 and we have a lot of different identifiers 30 00:01:27,000 --> 00:01:30,000 and we add new use all the time, 31 00:01:30,000 --> 00:01:32,000 but we always load the same page 32 00:01:32,000 --> 00:01:35,000 no matter what the concrete value here is. 33 00:01:35,000 --> 00:01:36,000 But then inside of the page, 34 00:01:36,000 --> 00:01:39,000 we simply have access to that value 35 00:01:39,000 --> 00:01:42,000 in the path so that we can fetch the proper data. 36 00:01:43,000 --> 00:01:47,000 And that is something we can implement with dynamic paths. 37 00:01:47,000 --> 00:01:50,000 For that, we change the file name here 38 00:01:50,000 --> 00:01:53,000 to a different file name, and we use a special syntax 39 00:01:53,000 --> 00:01:56,000 which will be understood by nextJS. 40 00:01:56,000 --> 00:01:58,000 We use square brackets here 41 00:01:58,000 --> 00:02:01,000 in the file name in front of the extension. 42 00:02:02,000 --> 00:02:05,000 If you have square brackets in your file name like this, 43 00:02:05,000 --> 00:02:09,000 this tells nextJS that this will be a dynamic page 44 00:02:09,000 --> 00:02:10,000 so that it should be loaded 45 00:02:10,000 --> 00:02:14,000 for different values in your path. 46 00:02:14,000 --> 00:02:17,000 And then you can add an identifier 47 00:02:17,000 --> 00:02:19,000 between those square brackets 48 00:02:19,000 --> 00:02:21,000 where the identifier name is totally up to you. 49 00:02:21,000 --> 00:02:25,000 Something like newsId, for example, like this. 50 00:02:25,000 --> 00:02:27,000 But this again is up to you, 51 00:02:27,000 --> 00:02:29,000 but you need those square brackets. 52 00:02:29,000 --> 00:02:31,000 This then tells nextJS that this page 53 00:02:31,000 --> 00:02:34,000 will be loaded for different values. 54 00:02:34,000 --> 00:02:37,000 So for example, for something important after slash news 55 00:02:37,000 --> 00:02:40,000 but also for any other identifier. 56 00:02:40,000 --> 00:02:42,000 And then in a next step, 57 00:02:42,000 --> 00:02:44,000 I will show you how you can get access 58 00:02:44,000 --> 00:02:48,000 to the concrete value entered here and how you can use that. 59 00:02:48,000 --> 00:02:50,000 But let's get there step by step. 60 00:02:50,000 --> 00:02:53,000 If we now saved as again, if I load this page 61 00:02:53,000 --> 00:02:56,000 for /news/thiscourseisgreat, 62 00:02:56,000 --> 00:02:58,000 I see the detail page, 63 00:02:58,000 --> 00:03:01,000 but I also see for something else 64 00:03:02,000 --> 00:03:05,000 or anything else we enter after slash news. 65 00:03:05,000 --> 00:03:09,000 So that is how we can add such a dynamic path here. 66 00:03:09,000 --> 00:03:13,000 And that is another key feature of nextJS. 67 00:03:13,000 --> 00:03:16,000 It's a feature that allows us to build truly dynamic 68 00:03:16,000 --> 00:03:19,000 and flexible websites with nextJS. 69 00:03:19,000 --> 00:03:24,000 But how can we now extract the entered path value 70 00:03:25,000 --> 00:03:27,000 inside of the component so that we can, 71 00:03:27,000 --> 00:03:30,000 for example, then fetch the correct news item 72 00:03:30,000 --> 00:03:31,000 from a database, 73 00:03:31,000 --> 00:03:34,000 let's say when a user visits this page?