1 00:00:00,000 --> 00:00:02,000 With that, we're almost done 2 00:00:02,000 --> 00:00:06,000 with this challenge, but there is one last task 3 00:00:06,000 --> 00:00:07,000 that needs to be solved. 4 00:00:08,000 --> 00:00:12,000 You should also add a main header component 5 00:00:12,000 --> 00:00:17,000 to the page that contains links to the homepage 6 00:00:17,000 --> 00:00:19,000 and this newly added news page. 7 00:00:20,000 --> 00:00:23,000 So a separate component should be added here 8 00:00:23,000 --> 00:00:28,000 and I did already mention in the essentials section 9 00:00:28,000 --> 00:00:30,000 that there will be different ways 10 00:00:30,000 --> 00:00:34,000 of structuring your NextJS project 11 00:00:34,000 --> 00:00:36,000 and that it's up to you 12 00:00:36,000 --> 00:00:40,000 where you wanna store component files for example 13 00:00:40,000 --> 00:00:44,000 that you could add a components folder in the app folder 14 00:00:44,000 --> 00:00:46,000 and have your components in there, 15 00:00:46,000 --> 00:00:48,000 but that you could for example 16 00:00:48,000 --> 00:00:52,000 also add that components folder outside of the app folder, 17 00:00:52,000 --> 00:00:57,000 so as a sibling to the app folder right inside your project. 18 00:00:57,000 --> 00:01:01,000 And all these strategies have different advantages 19 00:01:01,000 --> 00:01:04,000 and it ultimately comes down to your personal preference. 20 00:01:04,000 --> 00:01:07,000 Now, I will actually store my components 21 00:01:07,000 --> 00:01:11,000 in a folder outside of the app folder. 22 00:01:11,000 --> 00:01:14,000 So I added this components folder as a sibling to app 23 00:01:14,000 --> 00:01:17,000 and it's in there where I will add 24 00:01:17,000 --> 00:01:22,000 this main-header.js file where I will export 25 00:01:22,000 --> 00:01:27,000 this MainHeader component function like this. 26 00:01:28,000 --> 00:01:32,000 Well and in there, I will now return a header 27 00:01:32,000 --> 00:01:35,000 and the goal was to have these links in there 28 00:01:35,000 --> 00:01:38,000 and of course, it's therefor pretty much up to you 29 00:01:38,000 --> 00:01:40,000 which mark up you used 30 00:01:40,000 --> 00:01:43,000 for rendering these two links in the header. 31 00:01:43,000 --> 00:01:46,000 I will add my header like this 32 00:01:46,000 --> 00:01:48,000 and then simply add an unordered list 33 00:01:48,000 --> 00:01:51,000 with two list items and every list item 34 00:01:51,000 --> 00:01:56,000 will hold a link using the link component from NextJS, 35 00:01:56,000 --> 00:01:59,000 and on the first link, I'll say home 36 00:01:59,000 --> 00:02:01,000 and I'll navigate to /nothing, 37 00:02:01,000 --> 00:02:02,000 because that's the homepage 38 00:02:02,000 --> 00:02:06,000 and the second link will say News and navigate to /news. 39 00:02:09,000 --> 00:02:12,000 And now we just have to use this MainHeader component 40 00:02:12,000 --> 00:02:17,000 and we could now manually add it to every page component 41 00:02:17,000 --> 00:02:21,000 so that it's displayed above the content of that page, 42 00:02:21,000 --> 00:02:24,000 but that's of course not how you would do it, 43 00:02:24,000 --> 00:02:27,000 as you learned it in the essentials section. 44 00:02:28,000 --> 00:02:30,000 Instead, in NextJS, you have concept 45 00:02:30,000 --> 00:02:33,000 of working with layouts and pages 46 00:02:33,000 --> 00:02:36,000 and we already saw the idea behind pages. 47 00:02:36,000 --> 00:02:38,000 The idea behind layouts is simply 48 00:02:38,000 --> 00:02:42,000 that you create shells around page content 49 00:02:42,000 --> 00:02:44,000 so that you can have some shared content 50 00:02:44,000 --> 00:02:47,000 that's the same across multiple pages. 51 00:02:48,000 --> 00:02:51,000 And where you create pages with a page.js file, 52 00:02:51,000 --> 00:02:55,000 you create layouts with a layout.js file. 53 00:02:55,000 --> 00:02:57,000 That's the idea here. 54 00:02:58,000 --> 00:03:01,000 And therefor, we could create a new layout 55 00:03:01,000 --> 00:03:04,000 if we wanted to have a news specific layout, 56 00:03:04,000 --> 00:03:07,000 because you can have nested layouts in NextJS, 57 00:03:07,000 --> 00:03:09,000 but here I actually wanna have a layout 58 00:03:09,000 --> 00:03:12,000 that spans all my pages, 59 00:03:12,000 --> 00:03:15,000 including the root page, the home page 60 00:03:15,000 --> 00:03:18,000 and hence, I'll go to the root layout.js file 61 00:03:18,000 --> 00:03:22,000 which exists already, because every NextJS application 62 00:03:22,000 --> 00:03:25,000 must have such a root layout file. 63 00:03:26,000 --> 00:03:28,000 And in that root layout file, 64 00:03:28,000 --> 00:03:30,000 I will now go to the body, 65 00:03:30,000 --> 00:03:34,000 which wraps this children output here, 66 00:03:34,000 --> 00:03:36,000 which in the end will be the page content 67 00:03:36,000 --> 00:03:39,000 and above that, I will output 68 00:03:39,000 --> 00:03:42,000 my MainHeader component like this 69 00:03:42,000 --> 00:03:43,000 and of course, for that to work, 70 00:03:43,000 --> 00:03:46,000 it must be imported from the MainHeader file 71 00:03:46,000 --> 00:03:48,000 from the components folder. 72 00:03:50,000 --> 00:03:54,000 And here my IDE added to this import automatically 73 00:03:54,000 --> 00:03:56,000 and it automatically took advantage 74 00:03:56,000 --> 00:03:59,000 of this import path alias 75 00:03:59,000 --> 00:04:02,000 that's supported by NextJS projects 76 00:04:02,000 --> 00:04:07,000 where you can use an at symbol in your file import paths 77 00:04:07,000 --> 00:04:10,000 to point at the project root folder 78 00:04:10,000 --> 00:04:14,000 and then dive into the different sub-folders from there, 79 00:04:14,000 --> 00:04:16,000 for example, into the components folder 80 00:04:16,000 --> 00:04:18,000 which holds that MainHeader component file. 81 00:04:19,000 --> 00:04:22,000 And with that, the MainHeader will be output here 82 00:04:22,000 --> 00:04:27,000 and hence, if we save this, we'll see it up there. 83 00:04:27,000 --> 00:04:30,000 Again, not styled yet, but we'll change this soon, 84 00:04:30,000 --> 00:04:32,000 but I can click these links 85 00:04:32,000 --> 00:04:35,000 to be taken to the homepage, to the news page 86 00:04:35,000 --> 00:04:37,000 and then we can dive into those detail pages. 87 00:04:37,000 --> 00:04:40,000 And that's now all working the way it should 88 00:04:40,000 --> 00:04:43,000 and we therefor now successfully solved 89 00:04:43,000 --> 00:04:47,000 this first challenge and applied the knowledge 90 00:04:47,000 --> 00:04:49,000 we already had and of course, 91 00:04:49,000 --> 00:04:53,000 we're also now going to dive into new things 92 00:04:53,000 --> 00:04:54,000 throughout the rest of the section.