1 00:00:02,000 --> 00:00:04,000 Now I did prepare some components here 2 00:00:04,000 --> 00:00:05,000 in the layout folder 3 00:00:05,000 --> 00:00:09,000 in the Components folder that give our pages, 4 00:00:09,000 --> 00:00:13,000 a general layout and also a main navigation bar 5 00:00:13,000 --> 00:00:17,000 which holds some links, some list items with links. 6 00:00:17,000 --> 00:00:19,000 We just need to use that. 7 00:00:19,000 --> 00:00:21,000 Now this layout component is built such 8 00:00:21,000 --> 00:00:24,000 that we can wrap it around other components 9 00:00:24,000 --> 00:00:27,000 so that we can wrap it around our content 10 00:00:27,000 --> 00:00:30,000 that should be framed by that layout 11 00:00:30,000 --> 00:00:34,000 because layout, this component uses props children 12 00:00:34,000 --> 00:00:37,000 to take what's between the opening and closing layout text 13 00:00:37,000 --> 00:00:40,000 and wrap this component around that content. 14 00:00:41,000 --> 00:00:43,000 That means that we can, for example, 15 00:00:43,000 --> 00:00:45,000 go to the starting page, 16 00:00:45,000 --> 00:00:47,000 so in NextJS and the Pages folder, 17 00:00:47,000 --> 00:00:51,000 and we can wrap meetup list with layout. 18 00:00:51,000 --> 00:00:54,000 Now for this, we also need to import layout, of course. 19 00:00:54,000 --> 00:00:57,000 So we import layout from going up, 20 00:00:57,000 --> 00:01:01,000 components, layout, layout. 21 00:01:01,000 --> 00:01:03,000 We can add this import, 22 00:01:03,000 --> 00:01:04,000 and once this import was added 23 00:01:04,000 --> 00:01:08,000 we can wrap layout around meetup lists like this. 24 00:01:09,000 --> 00:01:12,000 And if we do that and save this, we get an error 25 00:01:12,000 --> 00:01:14,000 that link is not defined. 26 00:01:14,000 --> 00:01:16,000 Now we get this error because 27 00:01:16,000 --> 00:01:18,000 in that main navigation component, 28 00:01:18,000 --> 00:01:20,000 I'm using the link component 29 00:01:20,000 --> 00:01:22,000 but I'm not importing it deliberately 30 00:01:22,000 --> 00:01:25,000 because I wanted to do this together with you again. 31 00:01:25,000 --> 00:01:28,000 We learned about this link component 32 00:01:28,000 --> 00:01:32,000 and we import it from next/link. 33 00:01:32,000 --> 00:01:34,000 And that allows us to create those links. 34 00:01:34,000 --> 00:01:36,000 However, the two prop then should be changed 35 00:01:36,000 --> 00:01:39,000 to ref because the link component offered 36 00:01:39,000 --> 00:01:43,000 by NextJS wants this ref prop 37 00:01:43,000 --> 00:01:46,000 where we define the destination of that link. 38 00:01:46,000 --> 00:01:49,000 But with that changed and with that link import added, 39 00:01:49,000 --> 00:01:52,000 if we now save everything and reload, 40 00:01:52,000 --> 00:01:56,000 we got this nice navigation bar at the top here 41 00:01:56,000 --> 00:01:58,000 and we've got a white border around that 42 00:01:58,000 --> 00:02:00,000 for that go into your global styles 43 00:02:00,000 --> 00:02:04,000 and here in body, set margin to zero. 44 00:02:04,000 --> 00:02:06,000 That's something I forgot for the starting project. 45 00:02:06,000 --> 00:02:11,000 But if we add margin zero to body in the global CSS file 46 00:02:11,000 --> 00:02:12,000 then this white border is gone, 47 00:02:12,000 --> 00:02:14,000 and now we got this frame here 48 00:02:15,000 --> 00:02:18,000 and now we can also click all meetups to go 49 00:02:18,000 --> 00:02:21,000 to this starting page and click add new meetup 50 00:02:21,000 --> 00:02:23,000 to go to this page. 51 00:02:23,000 --> 00:02:25,000 On this page, we are, of course 52 00:02:25,000 --> 00:02:26,000 still missing the layout though. 53 00:02:26,000 --> 00:02:28,000 We only have it on the starting page. 54 00:02:29,000 --> 00:02:33,000 Now we want to have it on this new meetup page as well, 55 00:02:33,000 --> 00:02:34,000 and therefore, of course, 56 00:02:34,000 --> 00:02:37,000 we can always wrap layout around our content 57 00:02:37,000 --> 00:02:40,000 on the new meetup page to add the layout here as well. 58 00:02:40,000 --> 00:02:44,000 But you will probably see that, this becomes cumbersome, 59 00:02:44,000 --> 00:02:47,000 the more pages our application has. 60 00:02:47,000 --> 00:02:49,000 If we have an application with dozens 61 00:02:49,000 --> 00:02:53,000 or maybe hundreds of pages wrapping our general layout 62 00:02:53,000 --> 00:02:56,000 around all the page contents, 63 00:02:56,000 --> 00:02:59,000 so going into all the page components to then wrap layout 64 00:02:59,000 --> 00:03:02,000 around the content that becomes cumbersome, 65 00:03:02,000 --> 00:03:07,000 and that's now where this _app.js file becomes important. 66 00:03:07,000 --> 00:03:10,000 This is a special file, which exists 67 00:03:10,000 --> 00:03:12,000 in this Pages folder out of the box 68 00:03:12,000 --> 00:03:13,000 at which you could create on your own as well 69 00:03:13,000 --> 00:03:16,000 if it doesn't exist in which should contain content 70 00:03:16,000 --> 00:03:17,000 like this. 71 00:03:17,000 --> 00:03:20,000 This is kind of your route component. 72 00:03:20,000 --> 00:03:23,000 This MyApp component, which is defined in there, 73 00:03:23,000 --> 00:03:27,000 and that is just a regular react component in the end. 74 00:03:27,000 --> 00:03:30,000 This special component acts as the root component 75 00:03:30,000 --> 00:03:32,000 NextJS will render. 76 00:03:33,000 --> 00:03:36,000 It receives props and uses object de-structuring here 77 00:03:36,000 --> 00:03:39,000 to pull information out of the props 78 00:03:39,000 --> 00:03:41,000 and the information it pulls out there, 79 00:03:41,000 --> 00:03:44,000 is a component prop and a page prop. 80 00:03:44,000 --> 00:03:46,000 These props are passed into this 81 00:03:46,000 --> 00:03:50,000 MyApp component automatically by NextJS, 82 00:03:50,000 --> 00:03:55,000 since NextJS is the thing using that specific component. 83 00:03:55,000 --> 00:03:59,000 and component is a prop that holds the actual page 84 00:03:59,000 --> 00:04:01,000 contents that should be rendered. 85 00:04:01,000 --> 00:04:02,000 So it will be different 86 00:04:02,000 --> 00:04:06,000 whenever we switch a page and page props are specific props 87 00:04:06,000 --> 00:04:08,000 our pages might be getting, 88 00:04:08,000 --> 00:04:10,000 and at the moment our pages are not getting 89 00:04:10,000 --> 00:04:12,000 any props at all, 90 00:04:12,000 --> 00:04:14,000 because at the moment we have no source 91 00:04:14,000 --> 00:04:16,000 that would provide such props 92 00:04:16,000 --> 00:04:19,000 but that is something we're going to change. 93 00:04:19,000 --> 00:04:22,000 But with that, we now know that component here 94 00:04:22,000 --> 00:04:25,000 in this _app.js file will in the end 95 00:04:25,000 --> 00:04:30,000 be the actual page content of our different pages. 96 00:04:30,000 --> 00:04:32,000 And it will change whenever we navigate 97 00:04:32,000 --> 00:04:33,000 from page A to page B. 98 00:04:35,000 --> 00:04:36,000 Now, since that's the case, 99 00:04:36,000 --> 00:04:39,000 we can utilize this _app.js file 100 00:04:39,000 --> 00:04:42,000 and simply wrap this component here 101 00:04:42,000 --> 00:04:45,000 with our layout or with whichever wrapper you have. 102 00:04:45,000 --> 00:04:47,000 And we then don't have to do it 103 00:04:47,000 --> 00:04:50,000 inside of our different page files. 104 00:04:50,000 --> 00:04:52,000 So we can remove the layout wrapper 105 00:04:52,000 --> 00:04:55,000 from index.js here from our homepage, 106 00:04:55,000 --> 00:04:57,000 we can remove that and go back 107 00:04:57,000 --> 00:05:00,000 to just returning the meetup list 108 00:05:00,000 --> 00:05:02,000 and remove the layout import here 109 00:05:03,000 --> 00:05:04,000 and instead go to _app.js, 110 00:05:05,000 --> 00:05:09,000 and then here, we import layout 111 00:05:09,000 --> 00:05:13,000 from going up one level diving into components, 112 00:05:13,000 --> 00:05:17,000 layout and then pointing at the layout file. 113 00:05:17,000 --> 00:05:19,000 And we now wrap this component here 114 00:05:19,000 --> 00:05:21,000 with the layout component. 115 00:05:21,000 --> 00:05:24,000 And that means that our different page contents 116 00:05:24,000 --> 00:05:27,000 will be wrapped with this layout component. 117 00:05:28,000 --> 00:05:30,000 And hence, if we now save all files 118 00:05:30,000 --> 00:05:33,000 with all those changes, now on the new meetup page, 119 00:05:33,000 --> 00:05:36,000 we also got this layout applied. 120 00:05:36,000 --> 00:05:37,000 We got the navigation bar, 121 00:05:37,000 --> 00:05:40,000 we got the extra styling, which ensures 122 00:05:40,000 --> 00:05:43,000 that the page content does not take the entire width. 123 00:05:43,000 --> 00:05:45,000 And hence now on all the pages, 124 00:05:45,000 --> 00:05:49,000 we got this layout and we don't need to wrap it 125 00:05:49,000 --> 00:05:51,000 around the different page contents inside 126 00:05:51,000 --> 00:05:52,000 of the different page files. 127 00:05:52,000 --> 00:05:54,000 And of course that therefore is the way, 128 00:05:54,000 --> 00:05:57,000 more maintainable and convenient approach 129 00:05:57,000 --> 00:06:02,000 of applying general components to our application. 130 00:06:02,000 --> 00:06:04,000 So whenever you have some component 131 00:06:04,000 --> 00:06:07,000 or some setting that affects all your pages 132 00:06:07,000 --> 00:06:11,000 you can utilize this _app.js file to easily add 133 00:06:11,000 --> 00:06:15,000 that without diving into dozens of files individually.