1 00:00:00,000 --> 00:00:02,000 So now that we revisited 2 00:00:02,000 --> 00:00:07,000 this important concept of Server and Client Components, 3 00:00:07,000 --> 00:00:09,000 which is really important to understand, 4 00:00:09,000 --> 00:00:13,000 it's not too tricky to use, actually, as you saw, 5 00:00:13,000 --> 00:00:15,000 but it's important to be aware 6 00:00:15,000 --> 00:00:18,000 of these two different kinds of components. 7 00:00:18,000 --> 00:00:20,000 Now that we did that, 8 00:00:20,000 --> 00:00:24,000 we can dive back into routing-related features 9 00:00:24,000 --> 00:00:28,000 and explore another special kind of route you can set up 10 00:00:28,000 --> 00:00:31,000 when working with NextJS. 11 00:00:31,000 --> 00:00:34,000 And the kind of route I wanna explore next 12 00:00:34,000 --> 00:00:37,000 is a so-called interceptor route. 13 00:00:38,000 --> 00:00:40,000 Now, how does that work? 14 00:00:40,000 --> 00:00:44,000 Well, let's say here in our news slug, 15 00:00:44,000 --> 00:00:47,000 we actually wanna make that image 16 00:00:47,000 --> 00:00:49,000 that belongs to a news item clickable. 17 00:00:49,000 --> 00:00:54,000 So that we show it on a separate screen, a separate page 18 00:00:54,000 --> 00:00:58,000 that shows us that image as a full-screen image, let's say. 19 00:00:59,000 --> 00:01:01,000 To achieve this, we can, of course, 20 00:01:01,000 --> 00:01:03,000 add a new nested path here 21 00:01:03,000 --> 00:01:06,000 inside of that dynamic slug folder. 22 00:01:06,000 --> 00:01:07,000 And we could name it image. 23 00:01:07,000 --> 00:01:09,000 Obviously, the name is up to you. 24 00:01:09,000 --> 00:01:13,000 And in there we can add a page.js file, 25 00:01:13,000 --> 00:01:16,000 and then export our component function, 26 00:01:16,000 --> 00:01:17,000 which I'll name ImagePage. 27 00:01:19,000 --> 00:01:22,000 Now in there, I then wanna output that image. 28 00:01:24,000 --> 00:01:28,000 And to do that, I'll add a div with a className 29 00:01:28,000 --> 00:01:30,000 of fullscreen-image. 30 00:01:31,000 --> 00:01:34,000 And then in that div, I wanna output the image. 31 00:01:35,000 --> 00:01:38,000 And of course, now we need to find out which image 32 00:01:38,000 --> 00:01:40,000 for which article should be shown here, 33 00:01:40,000 --> 00:01:44,000 and therefore, I'll actually accept this params property, 34 00:01:44,000 --> 00:01:47,000 or I'll extract that params property 35 00:01:47,000 --> 00:01:49,000 from the incoming props, 36 00:01:50,000 --> 00:01:52,000 which will give me access to that select, 37 00:01:52,000 --> 00:01:56,000 because nested routes inside of some dynamic route 38 00:01:56,000 --> 00:02:01,000 also will have access to that dynamic route parameter, 39 00:02:01,000 --> 00:02:04,000 so to this slug parameter, in this case. 40 00:02:04,000 --> 00:02:09,000 So this nested image page can extract this news item slug 41 00:02:09,000 --> 00:02:13,000 by simply accessing params.slug, 42 00:02:13,000 --> 00:02:17,000 just as we did it directly on the dynamic route page itself. 43 00:02:19,000 --> 00:02:23,000 Therefore, of course, we can also copy the logic from there, 44 00:02:23,000 --> 00:02:28,000 including this not found check to get a specific news item 45 00:02:28,000 --> 00:02:32,000 like this, and not found must be imported 46 00:02:32,000 --> 00:02:35,000 from next/navigation in order to be available. 47 00:02:36,000 --> 00:02:40,000 And we can then use the news item to output the actual image 48 00:02:40,000 --> 00:02:45,000 so we can construct the source of the image dynamically. 49 00:02:45,000 --> 00:02:50,000 It's stored in the images/news folder in the public folder, 50 00:02:50,000 --> 00:02:55,000 and then the image name is stored in that news item. 51 00:02:55,000 --> 00:02:58,000 There we'll have a image property. 52 00:02:58,000 --> 00:03:00,000 And of course, DUMMY_NEWS also must be imported 53 00:03:00,000 --> 00:03:04,000 in order to be available in that file. 54 00:03:04,000 --> 00:03:06,000 So these imports must be added. 55 00:03:07,000 --> 00:03:10,000 With that, we have this image path 56 00:03:10,000 --> 00:03:13,000 and the alt text can, again, be newsItem.title, 57 00:03:13,000 --> 00:03:16,000 for example, like this. 58 00:03:17,000 --> 00:03:18,000 And of course, newsItem slug 59 00:03:18,000 --> 00:03:22,000 is what I should use here in this check. 60 00:03:22,000 --> 00:03:25,000 Okay, so with that, we're then outputting that image. 61 00:03:25,000 --> 00:03:28,000 Now in order to get to this page, 62 00:03:28,000 --> 00:03:32,000 we can go to the dynamic news detail page here, 63 00:03:32,000 --> 00:03:36,000 so the page.js filed directly in the slug folder, 64 00:03:36,000 --> 00:03:41,000 and then wrap this image here with a link. 65 00:03:41,000 --> 00:03:43,000 So we can use the link component, 66 00:03:43,000 --> 00:03:46,000 which is imported from next/link, 67 00:03:46,000 --> 00:03:51,000 and wrap that around the image like this 68 00:03:51,000 --> 00:03:54,000 and set the path of that link 69 00:03:54,000 --> 00:03:59,000 equal to /news/newsItem.slug/image. 70 00:04:03,000 --> 00:04:08,000 That's the path that will get us to this page.js file. 71 00:04:09,000 --> 00:04:11,000 Because that's inside of the news folder, 72 00:04:11,000 --> 00:04:14,000 then this dynamic slug folder and then the image folder. 73 00:04:14,000 --> 00:04:19,000 So the path is slash, news, slash, the slug, slash, image. 74 00:04:21,000 --> 00:04:25,000 If we save that and we are on a news item, 75 00:04:25,000 --> 00:04:27,000 we should therefore be able to click that image 76 00:04:27,000 --> 00:04:30,000 and we should see it like this. 77 00:04:30,000 --> 00:04:32,000 So that seems to work, 78 00:04:32,000 --> 00:04:36,000 but of course, this is now nothing new. 79 00:04:36,000 --> 00:04:38,000 I mean, the only new thing here 80 00:04:38,000 --> 00:04:42,000 is that we have a nested path inside of a dynamic path 81 00:04:42,000 --> 00:04:44,000 and yeah, that is nice to know 82 00:04:44,000 --> 00:04:47,000 and something you will definitely need from time to time. 83 00:04:47,000 --> 00:04:50,000 But that's not this intercepting route feature 84 00:04:50,000 --> 00:04:51,000 I mentioned before. 85 00:04:51,000 --> 00:04:54,000 Instead, that's what we'll explore next.