1 00:00:02,000 --> 00:00:03,000 So how do we then get access 2 00:00:03,000 --> 00:00:06,000 to the concrete value that was entered by the user 3 00:00:06,000 --> 00:00:08,000 in the URL? 4 00:00:08,000 --> 00:00:13,000 For this, Next.js gives us a special hook we can use. 5 00:00:13,000 --> 00:00:16,000 For this, we need to import something from 6 00:00:16,000 --> 00:00:19,000 Next slash router. 7 00:00:19,000 --> 00:00:22,000 So from the Next library 8 00:00:22,000 --> 00:00:25,000 and there from the router sub package. 9 00:00:25,000 --> 00:00:29,000 And we need to import the use router hook. 10 00:00:29,000 --> 00:00:33,000 So that's a React hook defined by the Next.js team 11 00:00:33,000 --> 00:00:37,000 which we can use an any functional component. 12 00:00:37,000 --> 00:00:42,000 Alternatively, if you're working with class-based components 13 00:00:42,000 --> 00:00:46,000 there also is a width router, higher order component 14 00:00:46,000 --> 00:00:49,000 which you can wrap around your class based component 15 00:00:49,000 --> 00:00:54,000 to get a special router prop injected into your component. 16 00:00:55,000 --> 00:00:58,000 But we're using the more modern 17 00:00:58,000 --> 00:01:00,000 functional component only approach here 18 00:01:00,000 --> 00:01:04,000 and therefore, we will use this use router hook. 19 00:01:05,000 --> 00:01:07,000 Now inside of the functional component 20 00:01:07,000 --> 00:01:09,000 we can then call use router like this 21 00:01:09,000 --> 00:01:14,000 and this will return a router object to us. 22 00:01:14,000 --> 00:01:17,000 Again, if you would be using width router 23 00:01:17,000 --> 00:01:20,000 you would be getting that router key here 24 00:01:20,000 --> 00:01:21,000 on your props object. 25 00:01:23,000 --> 00:01:25,000 Now, what does this router 26 00:01:25,000 --> 00:01:27,000 object give us which we're getting here? 27 00:01:27,000 --> 00:01:32,000 This router object exposes various pieces of data 28 00:01:32,000 --> 00:01:34,000 and various methods we can use. 29 00:01:34,000 --> 00:01:38,000 Now we'll have a look at the methods later when we dive into 30 00:01:38,000 --> 00:01:40,000 navigating between pages, but when it comes 31 00:01:40,000 --> 00:01:45,000 to the data properties, we, for example, get the path name 32 00:01:45,000 --> 00:01:47,000 and let's see what's inside of that 33 00:01:47,000 --> 00:01:50,000 by simply console logging it here. 34 00:01:50,000 --> 00:01:54,000 So that we can see what we get there as a value. 35 00:01:54,000 --> 00:01:57,000 And that's also console log something else. 36 00:01:57,000 --> 00:01:59,000 Let's console log, router dot query. 37 00:01:59,000 --> 00:02:02,000 That's another interesting property we can access 38 00:02:02,000 --> 00:02:04,000 on that router object. 39 00:02:05,000 --> 00:02:10,000 With that, if we saved as updated project ID page here. 40 00:02:10,000 --> 00:02:15,000 If we go to slash portfolio slash something 41 00:02:15,000 --> 00:02:16,000 or anything like that, 42 00:02:16,000 --> 00:02:19,000 and we then open up the developer tools, 43 00:02:19,000 --> 00:02:21,000 we see the path here. 44 00:02:21,000 --> 00:02:23,000 And the interesting thing here is that we don't 45 00:02:23,000 --> 00:02:27,000 see the path we entered into URL slash portfolio 46 00:02:27,000 --> 00:02:32,000 slash something, but the path inferred by Next.js. 47 00:02:32,000 --> 00:02:35,000 So the path to component file, 48 00:02:35,000 --> 00:02:38,000 that had to be loaded to bring this to the screen, 49 00:02:38,000 --> 00:02:42,000 the portfolio folder and then to square bracket 50 00:02:42,000 --> 00:02:45,000 project ID JS file if you want to read it like this. 51 00:02:45,000 --> 00:02:49,000 And that of course is the path Next.js had to take 52 00:02:49,000 --> 00:02:51,000 to reach this component, 53 00:02:51,000 --> 00:02:53,000 which is responsible for what we see here. 54 00:02:54,000 --> 00:02:59,000 So that is the encoded, the inferred path Next.js took. 55 00:03:00,000 --> 00:03:03,000 Then here, we have an empty object 56 00:03:03,000 --> 00:03:06,000 but we can ignore this double output we're getting here 57 00:03:06,000 --> 00:03:07,000 for the moment. 58 00:03:07,000 --> 00:03:10,000 Instead, if we have a look at the last log here, 59 00:03:10,000 --> 00:03:13,000 we see that it's actually not an empty object 60 00:03:13,000 --> 00:03:16,000 but it is an object with a project ID property 61 00:03:16,000 --> 00:03:19,000 and then a value of something. 62 00:03:19,000 --> 00:03:21,000 And that's the interesting part now. 63 00:03:21,000 --> 00:03:24,000 This query property on the router 64 00:03:24,000 --> 00:03:27,000 gives us access to the concrete data 65 00:03:27,000 --> 00:03:31,000 that is encoded in the URL. 66 00:03:31,000 --> 00:03:34,000 So it gives us access to the concrete value 67 00:03:34,000 --> 00:03:37,000 we get for this dynamic path segment. 68 00:03:37,000 --> 00:03:40,000 So we entered portfolio slash something 69 00:03:40,000 --> 00:03:43,000 and therefore something is the concrete value 70 00:03:43,000 --> 00:03:46,000 for this project ID placeholder. 71 00:03:46,000 --> 00:03:48,000 And that's why on this query object, 72 00:03:48,000 --> 00:03:51,000 we get project ideas a key name 73 00:03:51,000 --> 00:03:53,000 because I picked project ID here 74 00:03:53,000 --> 00:03:56,000 as a value between the square brackets 75 00:03:56,000 --> 00:04:01,000 and then something so what we entered into URL as a value. 76 00:04:01,000 --> 00:04:06,000 And that means that we can use this router query property 77 00:04:06,000 --> 00:04:10,000 to get access to the concrete value encoded in the URL. 78 00:04:10,000 --> 00:04:14,000 And if this would be the ID of some database object, 79 00:04:14,000 --> 00:04:19,000 we could then send a request to some backend server 80 00:04:19,000 --> 00:04:21,000 to fetch the 81 00:04:22,000 --> 00:04:26,000 piece of data with an ID of 82 00:04:26,000 --> 00:04:30,000 router dot query dot project ID in this case. 83 00:04:31,000 --> 00:04:33,000 That's how we could use this encoded value. 84 00:04:33,000 --> 00:04:36,000 And that of course, is how we will use it later 85 00:04:36,000 --> 00:04:39,000 once we also dive into data fetching. 86 00:04:39,000 --> 00:04:41,000 Here I just want you to understand 87 00:04:41,000 --> 00:04:44,000 how that routing works and how we can get access 88 00:04:44,000 --> 00:04:47,000 to the different pieces of data we might need. 89 00:04:47,000 --> 00:04:50,000 And that is how we can get access 90 00:04:50,000 --> 00:04:52,000 to this dynamic segment value.