1 00:00:00,000 --> 00:00:05,000 So let's solve this challenge, this exercise together now. 2 00:00:05,000 --> 00:00:07,000 And for that here in the project, 3 00:00:07,000 --> 00:00:10,000 I'll start by adding these two new pages. 4 00:00:10,000 --> 00:00:13,000 And as you learned, you add a new page 5 00:00:13,000 --> 00:00:17,000 by adding a new folder to that app directory. 6 00:00:17,000 --> 00:00:20,000 Now here, since we want to have a slash news 7 00:00:20,000 --> 00:00:24,000 path in the URL, the folder name should be news 8 00:00:25,000 --> 00:00:28,000 because as you learned earlier in the course, 9 00:00:28,000 --> 00:00:32,000 you add routes like this, such standard routes, 10 00:00:32,000 --> 00:00:36,000 which should lead to a certain path by adding a folder 11 00:00:36,000 --> 00:00:38,000 that in the end concludes 12 00:00:38,000 --> 00:00:42,000 that route path name in the app folder. 13 00:00:42,000 --> 00:00:45,000 So if you wanna navigate to a slash about page, 14 00:00:45,000 --> 00:00:49,000 you would add an about folder in the app folder. 15 00:00:49,000 --> 00:00:51,000 Therefore, that's what I did here. 16 00:00:51,000 --> 00:00:54,000 Though, as you also learned, that's not enough. 17 00:00:54,000 --> 00:00:58,000 Instead, you also must add a file named page.js 18 00:00:58,000 --> 00:01:01,000 in that news folder, 19 00:01:01,000 --> 00:01:05,000 and it could also end with jsx if you prefer that, 20 00:01:05,000 --> 00:01:09,000 or if you're using TypeScript with .ts or tsx. 21 00:01:10,000 --> 00:01:12,000 Now here I'll go for .Js. 22 00:01:12,000 --> 00:01:16,000 So that is the first page, though of course, 23 00:01:16,000 --> 00:01:18,000 at the moment I'm not displaying anything. 24 00:01:19,000 --> 00:01:22,000 Now before I'll worry about outputting something, 25 00:01:22,000 --> 00:01:24,000 I want to add that second page, 26 00:01:24,000 --> 00:01:28,000 and that should be a nested page slash news 27 00:01:28,000 --> 00:01:29,000 slash something else. 28 00:01:29,000 --> 00:01:34,000 And that something else should be dynamic. 29 00:01:34,000 --> 00:01:38,000 It should be a value that can be different 30 00:01:38,000 --> 00:01:41,000 for every navigation request. 31 00:01:41,000 --> 00:01:44,000 And you learned that such dynamic routes can be added 32 00:01:44,000 --> 00:01:47,000 by defining a folder 33 00:01:47,000 --> 00:01:52,000 that wraps the placeholder for the actual value 34 00:01:52,000 --> 00:01:57,000 that will be encoded in the URL between square brackets. 35 00:01:57,000 --> 00:02:02,000 Therefore here I'll add a sub folder in the news folder 36 00:02:02,000 --> 00:02:05,000 and add those square brackets. 37 00:02:05,000 --> 00:02:10,000 And then here I will use ID as a placeholder. 38 00:02:10,000 --> 00:02:13,000 And the exact placeholder here is up to you. 39 00:02:13,000 --> 00:02:15,000 You can use any identifier of your choice. 40 00:02:16,000 --> 00:02:19,000 And then in there I also add a page.js file 41 00:02:19,000 --> 00:02:22,000 so that we now added these two pages. 42 00:02:24,000 --> 00:02:25,000 Now in order to output something there, 43 00:02:25,000 --> 00:02:30,000 we then must export function components in those 44 00:02:30,000 --> 00:02:32,000 page js files. 45 00:02:32,000 --> 00:02:35,000 So here I have the news page 46 00:02:35,000 --> 00:02:37,000 and I'll simply return a age one element 47 00:02:37,000 --> 00:02:40,000 where I say news page for now. 48 00:02:41,000 --> 00:02:45,000 And then here in the nested news detail page, 49 00:02:45,000 --> 00:02:48,000 I'll name it news detail page 50 00:02:48,000 --> 00:02:52,000 and have news detail page in my title here. 51 00:02:52,000 --> 00:02:55,000 And if we now save both files 52 00:02:55,000 --> 00:02:59,000 and we go back to the application, we can navigate to 53 00:02:59,000 --> 00:03:04,000 slash news and we see that news page text here, 54 00:03:05,000 --> 00:03:09,000 and we can also go to slash news slash abc 55 00:03:09,000 --> 00:03:12,000 and we're on the news detail page, 56 00:03:12,000 --> 00:03:14,000 so that works the way it should. 57 00:03:15,000 --> 00:03:18,000 Now of course, this wasn't everything though. 58 00:03:18,000 --> 00:03:20,000 Instead the goal was to output a list 59 00:03:20,000 --> 00:03:23,000 of links on the news page. 60 00:03:23,000 --> 00:03:27,000 Links that lead us to the news detail page. 61 00:03:28,000 --> 00:03:32,000 Therefore, in that news page here, I will actually 62 00:03:32,000 --> 00:03:35,000 wrap a fragment around my content 63 00:03:36,000 --> 00:03:40,000 and then here output a list of links. 64 00:03:40,000 --> 00:03:43,000 And for that I'll use an on or a list with list items. 65 00:03:43,000 --> 00:03:47,000 And those links should lead to the detail page. 66 00:03:47,000 --> 00:03:49,000 Now, we could add those links 67 00:03:49,000 --> 00:03:53,000 by using the standard anchor element, right? 68 00:03:53,000 --> 00:03:55,000 We could add a link that leads 69 00:03:55,000 --> 00:04:00,000 to slash news slash ABC like this. 70 00:04:01,000 --> 00:04:05,000 However, as you learned in the essentials section, 71 00:04:05,000 --> 00:04:07,000 this is not the recommended way 72 00:04:07,000 --> 00:04:11,000 of creating internal links in your website 73 00:04:11,000 --> 00:04:13,000 when using NextJS. 74 00:04:14,000 --> 00:04:16,000 Instead, you should replace the anchor element 75 00:04:16,000 --> 00:04:21,000 with the link component, which is provided by NextJS, 76 00:04:21,000 --> 00:04:25,000 and you import that from next link. 77 00:04:26,000 --> 00:04:27,000 And you should use that 78 00:04:27,000 --> 00:04:29,000 because this will then ensure 79 00:04:29,000 --> 00:04:32,000 that you stay in this single page application 80 00:04:32,000 --> 00:04:34,000 flow and world. 81 00:04:35,000 --> 00:04:38,000 So here I'll simply add three links. 82 00:04:38,000 --> 00:04:41,000 Let's say it's up to you how many you want. 83 00:04:41,000 --> 00:04:45,000 And I'll name the first one first news 84 00:04:45,000 --> 00:04:50,000 and first dash news could be my ID of that news item. 85 00:04:50,000 --> 00:04:53,000 And maybe let's say first news item here. 86 00:04:53,000 --> 00:04:57,000 Then I have the second news item here. 87 00:04:57,000 --> 00:05:01,000 And the ID is second dash news. 88 00:05:01,000 --> 00:05:03,000 And then here the ID is third dash news. 89 00:05:03,000 --> 00:05:06,000 And as you might guess, I'll have a text 90 00:05:06,000 --> 00:05:08,000 of third news item. 91 00:05:10,000 --> 00:05:15,000 So now we have these three links, and if we now save that 92 00:05:15,000 --> 00:05:19,000 and we go back to the news page, we see them here. 93 00:05:19,000 --> 00:05:22,000 Obviously not styled yet, we'll take care of that later. 94 00:05:22,000 --> 00:05:25,000 But we see these items. 95 00:05:25,000 --> 00:05:27,000 And if I click the second news item, 96 00:05:27,000 --> 00:05:29,000 you see that in the URL 97 00:05:29,000 --> 00:05:33,000 I have that second dash news ID now, 98 00:05:33,000 --> 00:05:35,000 and we're on the news detail page. 99 00:05:37,000 --> 00:05:41,000 Now as a bonus task, I asked you to extract 100 00:05:41,000 --> 00:05:44,000 that value of that id 101 00:05:44,000 --> 00:05:46,000 that is encoded in the URL. 102 00:05:46,000 --> 00:05:51,000 So second dash news for this news item, for example. 103 00:05:51,000 --> 00:05:53,000 And this can be achieved by going to 104 00:05:53,000 --> 00:05:55,000 that news detail page component. 105 00:05:55,000 --> 00:05:59,000 And then there you can extract some props 106 00:05:59,000 --> 00:06:01,000 which are passed into this 107 00:06:01,000 --> 00:06:03,000 component automatically by NextJS. 108 00:06:04,000 --> 00:06:09,000 To be precise, NextJS will pass a params prop 109 00:06:10,000 --> 00:06:13,000 into every page component. 110 00:06:13,000 --> 00:06:16,000 So whenever you register something as a page component 111 00:06:16,000 --> 00:06:20,000 by making it the default export in a page JS file, 112 00:06:20,000 --> 00:06:22,000 it will receive this params prop. 113 00:06:23,000 --> 00:06:28,000 And this params prop here will be an object which holds 114 00:06:28,000 --> 00:06:31,000 one key for every dynamic path segment. 115 00:06:31,000 --> 00:06:35,000 So here we have that ID dynamic path segment, 116 00:06:35,000 --> 00:06:39,000 and therefore this params object will have an ID key 117 00:06:40,000 --> 00:06:42,000 and that will then be our news id. 118 00:06:43,000 --> 00:06:47,000 And therefore, now here I'll actually also output some 119 00:06:47,000 --> 00:06:49,000 content that's wrapped by a fragment 120 00:06:49,000 --> 00:06:54,000 because I also want to have a paragraph where I say news ID 121 00:06:54,000 --> 00:06:56,000 and where I output that news ID. 122 00:06:56,000 --> 00:06:57,000 Like this. 123 00:06:59,000 --> 00:07:02,000 With that saved, if you reload and go back, 124 00:07:02,000 --> 00:07:04,000 you see that now we have 125 00:07:04,000 --> 00:07:07,000 that second news Id being output here 126 00:07:07,000 --> 00:07:09,000 and hopefully, unsurprisingly, 127 00:07:09,000 --> 00:07:12,000 if I would visit the third news item, 128 00:07:12,000 --> 00:07:14,000 we would see third news here.