1 00:00:02,000 --> 00:00:03,000 Now, whilst we're not going 2 00:00:03,000 --> 00:00:06,000 to proceed on this DetailPage for the moment, 3 00:00:06,000 --> 00:00:09,000 whilst we're not going to dive into data fetching 4 00:00:09,000 --> 00:00:12,000 for the moment, I wanna come back to this index.js file 5 00:00:12,000 --> 00:00:15,000 in the news folder and talk about navigation 6 00:00:15,000 --> 00:00:17,000 because currently, I, of course, 7 00:00:17,000 --> 00:00:22,000 always enter URLs in the URL bar manually 8 00:00:22,000 --> 00:00:26,000 and that, of course, is not how users use our website. 9 00:00:26,000 --> 00:00:28,000 Instead, we have links on our website 10 00:00:28,000 --> 00:00:31,000 that allow users to navigate around. 11 00:00:31,000 --> 00:00:34,000 Hence here on this index.js file in the news page, 12 00:00:34,000 --> 00:00:36,000 so on /news page, 13 00:00:36,000 --> 00:00:40,000 we typically don't just wanna say The News Page 14 00:00:40,000 --> 00:00:42,000 but we might also want to display a list 15 00:00:42,000 --> 00:00:45,000 of news items, which are then clickable. 16 00:00:45,000 --> 00:00:48,000 And to do that, I'll wrap this here in a Fragment, 17 00:00:48,000 --> 00:00:50,000 which I import from React 18 00:00:50,000 --> 00:00:53,000 so that we can have a JSON JSX element. 19 00:00:54,000 --> 00:00:57,000 And render a unordered list here. 20 00:00:57,000 --> 00:00:58,000 And in that unordered list, 21 00:00:58,000 --> 00:01:02,000 we could have well, a list of dummy news items. 22 00:01:02,000 --> 00:01:07,000 For example, the NextJS Is A Great Framework article 23 00:01:09,000 --> 00:01:11,000 and then also the Something else article. 24 00:01:11,000 --> 00:01:12,000 Whatever. 25 00:01:12,000 --> 00:01:14,000 So we have two news items here 26 00:01:14,000 --> 00:01:16,000 and these should now be clickable 27 00:01:16,000 --> 00:01:21,000 and then lead to the newsId page with different IDs, 28 00:01:21,000 --> 00:01:25,000 different concrete values encoded in the URL. 29 00:01:25,000 --> 00:01:27,000 Now, when we wanna build a link, 30 00:01:27,000 --> 00:01:30,000 we typically do this by using the anchor tag. 31 00:01:30,000 --> 00:01:32,000 We can create an anchor element 32 00:01:32,000 --> 00:01:35,000 and wrap our text with that. 33 00:01:35,000 --> 00:01:38,000 And then here, we can encode the URL 34 00:01:38,000 --> 00:01:40,000 to which we wanna go. 35 00:01:40,000 --> 00:01:43,000 So in this case, if we wanna stay on this server, 36 00:01:43,000 --> 00:01:46,000 we could say we're going to /news/ 37 00:01:46,000 --> 00:01:50,000 and then nextjs-is-a-great-framework 38 00:01:50,000 --> 00:01:54,000 if that would be the identifier of this news item. 39 00:01:55,000 --> 00:01:58,000 And of course, this list could also be generated dynamically 40 00:01:58,000 --> 00:02:01,000 by mapping some array of data into JSX elements. 41 00:02:01,000 --> 00:02:03,000 I'm just hard coding it here 42 00:02:03,000 --> 00:02:04,000 because for the moment, 43 00:02:04,000 --> 00:02:07,000 I wanna focus on the navigation feature. 44 00:02:07,000 --> 00:02:09,000 So that is how we do construct a link 45 00:02:09,000 --> 00:02:12,000 in regular HTML 46 00:02:12,000 --> 00:02:15,000 and if we save this, it also will work. 47 00:02:15,000 --> 00:02:18,000 If I go back to the /news page here, 48 00:02:18,000 --> 00:02:21,000 we actually don't see that it's a link 49 00:02:21,000 --> 00:02:23,000 because in the globals.css file, 50 00:02:23,000 --> 00:02:26,000 I basically disabled the default styling 51 00:02:26,000 --> 00:02:28,000 that would show you that it's a link. 52 00:02:28,000 --> 00:02:29,000 But we can click it 53 00:02:29,000 --> 00:02:33,000 and if I do click it, I am taken to that detail page 54 00:02:33,000 --> 00:02:35,000 for that specific value. 55 00:02:35,000 --> 00:02:37,000 So that is working. 56 00:02:38,000 --> 00:02:41,000 But this is only the second best way 57 00:02:41,000 --> 00:02:44,000 of navigating around in a NextJS app. 58 00:02:44,000 --> 00:02:47,000 It works but watch this refresh icon here 59 00:02:47,000 --> 00:02:49,000 when I click this link. 60 00:02:49,000 --> 00:02:51,000 It briefly turns to a cross 61 00:02:51,000 --> 00:02:54,000 and then goes back to the refresh icon. 62 00:02:54,000 --> 00:02:58,000 This always signals that the browser sends a new request 63 00:02:58,000 --> 00:03:02,000 and gets back a new HTML page. 64 00:03:02,000 --> 00:03:05,000 And that all works but it has a disadvantage. 65 00:03:05,000 --> 00:03:09,000 It means that we don't have a single page application here. 66 00:03:09,000 --> 00:03:12,000 It means instead that we're always sending a new request 67 00:03:12,000 --> 00:03:15,000 to the backend to fetch a new HTML page 68 00:03:15,000 --> 00:03:18,000 whenever the user navigates around. 69 00:03:18,000 --> 00:03:20,000 And that's not our goal here. 70 00:03:20,000 --> 00:03:23,000 It's great that we have those pre-rendered pages 71 00:03:23,000 --> 00:03:26,000 so that when a user initially visits our site, 72 00:03:26,000 --> 00:03:29,000 some content is there right from the start 73 00:03:29,000 --> 00:03:31,000 and it's also great for search engines 74 00:03:31,000 --> 00:03:34,000 but if a user is on the page already 75 00:03:34,000 --> 00:03:36,000 and then navigates around on it, 76 00:03:36,000 --> 00:03:39,000 we wanna stay in that single page application 77 00:03:39,000 --> 00:03:42,000 because that allows us to preserve state 78 00:03:42,000 --> 00:03:45,000 across pages and give the user a better, 79 00:03:45,000 --> 00:03:50,000 a more reactive experience, a better user experience. 80 00:03:50,000 --> 00:03:54,000 That, after all, is one of the reasons for using React, 81 00:03:54,000 --> 00:03:56,000 that we wanna build an interactive UI 82 00:03:56,000 --> 00:04:01,000 where we never send a request for a new HTML page 83 00:04:01,000 --> 00:04:04,000 but where we instead update what's on the screen 84 00:04:04,000 --> 00:04:07,000 with JavaScript, with React in the end. 85 00:04:07,000 --> 00:04:09,000 And we're not doing this here 86 00:04:09,000 --> 00:04:10,000 when we create a link like this. 87 00:04:10,000 --> 00:04:13,000 Instead, we load a brand new page. 88 00:04:13,000 --> 00:04:16,000 We would lose any state we might be storing, 89 00:04:16,000 --> 00:04:19,000 any Redux sate or context state, 90 00:04:19,000 --> 00:04:20,000 all of that would be lost 91 00:04:20,000 --> 00:04:22,000 because we load a new page. 92 00:04:22,000 --> 00:04:26,000 And we simply don't have a single page application here. 93 00:04:26,000 --> 00:04:29,000 Therefore, to stay in that single page application, 94 00:04:29,000 --> 00:04:31,000 we need to create the link differently. 95 00:04:31,000 --> 00:04:35,000 We need to utilize a special component offered by Next, 96 00:04:35,000 --> 00:04:39,000 to be precise, offered by next/link. 97 00:04:39,000 --> 00:04:42,000 That's another sub-package which is responsible for linking 98 00:04:42,000 --> 00:04:46,000 and from there, we can import Link actually 99 00:04:46,000 --> 00:04:49,000 as a default export. 100 00:04:49,000 --> 00:04:52,000 So importing the default export like this. 101 00:04:52,000 --> 00:04:55,000 This imports the Link component from next/link 102 00:04:55,000 --> 00:04:57,000 and that's a special component, 103 00:04:57,000 --> 00:05:01,000 which we can use in our JSX code to build links. 104 00:05:01,000 --> 00:05:02,000 Using it is simple. 105 00:05:02,000 --> 00:05:05,000 You simply use it instead of the anchor tag here. 106 00:05:05,000 --> 00:05:08,000 So I replace a with Link. 107 00:05:08,000 --> 00:05:11,000 We leave the ref attribute, the ref prop 108 00:05:11,000 --> 00:05:14,000 because Link expects a ref prop. 109 00:05:14,000 --> 00:05:19,000 And that then sets the target destination of that link. 110 00:05:19,000 --> 00:05:22,000 It will also then by default render an anchor element. 111 00:05:22,000 --> 00:05:24,000 So all that will still work. 112 00:05:24,000 --> 00:05:26,000 Our styling will still apply. 113 00:05:26,000 --> 00:05:28,000 Yet, if I save and reload, 114 00:05:28,000 --> 00:05:32,000 if I now click this and you watch the refresh icon, 115 00:05:32,000 --> 00:05:35,000 you see that now this never changes to a cross. 116 00:05:35,000 --> 00:05:38,000 Now we instantly go to the second page 117 00:05:38,000 --> 00:05:43,000 and now we go there without fetching a new HTML page. 118 00:05:43,000 --> 00:05:46,000 Instead we are on a single page application 119 00:05:46,000 --> 00:05:49,000 and the visible content on the screen 120 00:05:49,000 --> 00:05:52,000 is actually just re-rendered by React. 121 00:05:52,000 --> 00:05:54,000 And that's great because that allows us 122 00:05:54,000 --> 00:05:57,000 to combine the best of both worlds. 123 00:05:57,000 --> 00:05:59,000 We have this highly interactive 124 00:05:59,000 --> 00:06:02,000 and reactive single page application here 125 00:06:02,000 --> 00:06:05,000 where we can manage and store state across pages 126 00:06:05,000 --> 00:06:08,000 and yet, if a user would visit this page 127 00:06:08,000 --> 00:06:11,000 as an initial page by just entering this URL 128 00:06:11,000 --> 00:06:14,000 and hitting Enter, we would also be able 129 00:06:14,000 --> 00:06:17,000 to return the finished HTML page here. 130 00:06:17,000 --> 00:06:20,000 So search engines would also see that finished page 131 00:06:20,000 --> 00:06:21,000 if they directly visit it. 132 00:06:21,000 --> 00:06:23,000 But if we were on the website already, 133 00:06:23,000 --> 00:06:25,000 and we just clicked the link, 134 00:06:25,000 --> 00:06:27,000 we stay on that single page app, 135 00:06:27,000 --> 00:06:30,000 we stay inside of that single page app. 136 00:06:30,000 --> 00:06:34,000 Because Link, this special Link component renders 137 00:06:34,000 --> 00:06:38,000 an anchor tag but it watches clicks on those anchor tags 138 00:06:38,000 --> 00:06:42,000 and if you click there, it prevents the browser default 139 00:06:42,000 --> 00:06:46,000 of sending a request, at getting a new HTML page. 140 00:06:46,000 --> 00:06:50,000 Instead, it will load the to be loaded component for you 141 00:06:50,000 --> 00:06:52,000 and change the URL 142 00:06:52,000 --> 00:06:55,000 so that it looks like you changed the page 143 00:06:55,000 --> 00:06:59,000 whilst in reality, you stay in that single page application. 144 00:06:59,000 --> 00:07:02,000 And hence, for site internal links 145 00:07:02,000 --> 00:07:04,000 in a NextJS application, 146 00:07:04,000 --> 00:07:06,000 you wanna use the Link component 147 00:07:06,000 --> 00:07:08,000 instead of the anchor tag component 148 00:07:08,000 --> 00:07:11,000 because with that, you get the best of both worlds.