1 00:00:02,000 --> 00:00:05,000 So now we built a bunch of dummy components, 2 00:00:05,000 --> 00:00:08,000 a bunch of dummy page components here. 3 00:00:08,000 --> 00:00:11,000 Of course our application. 4 00:00:11,000 --> 00:00:13,000 If you want to call it like that, 5 00:00:13,000 --> 00:00:15,000 isn't doing anything useful though. 6 00:00:15,000 --> 00:00:17,000 And it's not doing anything useful on purpose 7 00:00:17,000 --> 00:00:21,000 because I just wanna to show these core features first 8 00:00:21,000 --> 00:00:23,000 before we then later combined what we know to 9 00:00:23,000 --> 00:00:28,000 build something more realistic, to build a real application. 10 00:00:28,000 --> 00:00:31,000 Now, up to this point, we have all those different pages 11 00:00:31,000 --> 00:00:34,000 and components, but we can only navigate between them 12 00:00:34,000 --> 00:00:37,000 by manually changing the URL. 13 00:00:37,000 --> 00:00:40,000 And that's of course not very realistic. 14 00:00:40,000 --> 00:00:44,000 In reality, we typically wanna navigate through links 15 00:00:44,000 --> 00:00:48,000 or programmatically when some action completed 16 00:00:48,000 --> 00:00:50,000 and therefore that what we're going to have a look at 17 00:00:50,000 --> 00:00:55,000 right now and for this let's go to our main index JS file. 18 00:00:55,000 --> 00:00:58,000 So directly in the pages folder, 19 00:00:58,000 --> 00:01:00,000 this homepage component here, 20 00:01:01,000 --> 00:01:03,000 there, let's say we now also wanna 21 00:01:03,000 --> 00:01:06,000 add a bunch of links so we can add a unordered list 22 00:01:06,000 --> 00:01:09,000 component with a couple of lists items. 23 00:01:09,000 --> 00:01:13,000 And then in every list item, we want to have a link to some 24 00:01:13,000 --> 00:01:16,000 of those pages we created here. 25 00:01:16,000 --> 00:01:17,000 For example, we could add links 26 00:01:17,000 --> 00:01:21,000 to the portfolio index and to our clients index. 27 00:01:22,000 --> 00:01:23,000 Now, how do we do that? 28 00:01:23,000 --> 00:01:27,000 Normally we add links with an anchor tag. 29 00:01:27,000 --> 00:01:29,000 We can do this here as well. 30 00:01:29,000 --> 00:01:33,000 We could add a link like this and it would work, 31 00:01:34,000 --> 00:01:36,000 but this has a disadvantage. 32 00:01:36,000 --> 00:01:37,000 Now let's add it like this though. 33 00:01:37,000 --> 00:01:40,000 Let's add a link as an anchor tag 34 00:01:41,000 --> 00:01:45,000 Hence if we go back to just our domain slash nothing 35 00:01:45,000 --> 00:01:47,000 we see that link. 36 00:01:47,000 --> 00:01:51,000 If I click it, I'm taken to the portfolio page. 37 00:01:51,000 --> 00:01:53,000 It works, but it has a disadvantage. 38 00:01:53,000 --> 00:01:58,000 The disadvantage here is that with such a standard link, 39 00:01:59,000 --> 00:02:02,000 we in the end send a brand new HTTP request to 40 00:02:02,000 --> 00:02:07,000 load this new page, which means that any application state 41 00:02:07,000 --> 00:02:11,000 we might have when our running React app would be lost. 42 00:02:11,000 --> 00:02:15,000 If we have some App-wide state, which is stored 43 00:02:15,000 --> 00:02:17,000 with React context or Redux, 44 00:02:17,000 --> 00:02:20,000 it would be lost since we send a brand new request 45 00:02:20,000 --> 00:02:24,000 and we get a brand new HTML page. 46 00:02:24,000 --> 00:02:29,000 And that's not really the idea of building a React app 47 00:02:29,000 --> 00:02:32,000 no matter if you're using Next.js or not, you wanna stay 48 00:02:32,000 --> 00:02:35,000 in that app and you want to manage App-wide state. 49 00:02:35,000 --> 00:02:40,000 That shouldn't change just because you use Next.js, 50 00:02:40,000 --> 00:02:43,000 because if that would not work this way anymore 51 00:02:43,000 --> 00:02:47,000 it would actually be a disadvantage and not an improvement. 52 00:02:48,000 --> 00:02:52,000 So therefore we typically don't want to use links like this. 53 00:02:52,000 --> 00:02:57,000 Instead when using React Router in a non Next application, 54 00:02:57,000 --> 00:03:01,000 we import a link component from React Router. 55 00:03:01,000 --> 00:03:03,000 And with Next.js, it's the same 56 00:03:03,000 --> 00:03:07,000 for this we again import something from Next 57 00:03:07,000 --> 00:03:11,000 but now not from Next router, but from Next link. 58 00:03:11,000 --> 00:03:13,000 And we import link. 59 00:03:13,000 --> 00:03:17,000 Important here not between curly braces, 60 00:03:17,000 --> 00:03:19,000 because link is the default export 61 00:03:19,000 --> 00:03:22,000 of this link package from the Next library. 62 00:03:23,000 --> 00:03:25,000 So we import link 63 00:03:25,000 --> 00:03:28,000 and the link is a component which we can use 64 00:03:28,000 --> 00:03:32,000 and we can use it as a replacement for the anchor tag. 65 00:03:32,000 --> 00:03:36,000 So we can simply replace a with link. 66 00:03:36,000 --> 00:03:41,000 Now link has a href prop, which we can set, so we don't even 67 00:03:41,000 --> 00:03:42,000 need to change this. 68 00:03:42,000 --> 00:03:47,000 And the href prop also takes a string with the path 69 00:03:47,000 --> 00:03:49,000 to which we wanna navigate. 70 00:03:49,000 --> 00:03:50,000 Now, if we save that therefore, 71 00:03:50,000 --> 00:03:54,000 and we go back to our starting page. 72 00:03:55,000 --> 00:03:58,000 If I now click on portfolio, 73 00:03:58,000 --> 00:04:00,000 I still go to the portfolio page. 74 00:04:00,000 --> 00:04:04,000 But now without sending a HTTP request behind the scenes 75 00:04:04,000 --> 00:04:08,000 without losing any app-state we might have 76 00:04:08,000 --> 00:04:11,000 and the link component actually also has a couple 77 00:04:11,000 --> 00:04:13,000 of other tricks up its sleeve. 78 00:04:13,000 --> 00:04:16,000 It has a couple of other improvements. 79 00:04:16,000 --> 00:04:19,000 For example, it automatically pre fetches any data 80 00:04:19,000 --> 00:04:22,000 off the page we might navigate to as soon 81 00:04:22,000 --> 00:04:24,000 as we hover over the link and so on. 82 00:04:24,000 --> 00:04:27,000 So these are some advanced optimizations which 83 00:04:27,000 --> 00:04:29,000 will become important later. 84 00:04:30,000 --> 00:04:32,000 Now on this link component 85 00:04:32,000 --> 00:04:36,000 we can also set a couple of other props of, for example 86 00:04:36,000 --> 00:04:41,000 we can set a replace prop to not push this new page 87 00:04:41,000 --> 00:04:43,000 but replace the current page with it. 88 00:04:43,000 --> 00:04:47,000 So that we can't go back that can sometimes be useful. 89 00:04:47,000 --> 00:04:50,000 And we can also set a couple of other options, 90 00:04:50,000 --> 00:04:53,000 which we'll dive in later. 91 00:04:53,000 --> 00:04:56,000 For the moment href is the most important option. 92 00:04:58,000 --> 00:05:01,000 And therefore of course, now we can add another list item 93 00:05:01,000 --> 00:05:05,000 with another link where we wanna go to our clients. 94 00:05:05,000 --> 00:05:10,000 So here we could then set href to slash clients 95 00:05:11,000 --> 00:05:13,000 to be taken to that client's page. 96 00:05:13,000 --> 00:05:17,000 If you go back and reload this 97 00:05:17,000 --> 00:05:19,000 and go to clients here we are. 98 00:05:20,000 --> 00:05:22,000 Now on that client's page, 99 00:05:22,000 --> 00:05:25,000 we might want to go to our individual clients. 100 00:05:25,000 --> 00:05:30,000 So we want to plug in a value for that dynamic ID 101 00:05:30,000 --> 00:05:34,000 and therefore an index JS in the client's folder here. 102 00:05:34,000 --> 00:05:36,000 I also want to add a couple of links 103 00:05:36,000 --> 00:05:39,000 and I want to now navigate to dynamic routes. 104 00:05:39,000 --> 00:05:41,000 And that's what we're going to take a look at 105 00:05:41,000 --> 00:05:42,000 in the next lecture.