1 00:00:02,000 --> 00:00:03,000 So for this MeetupDetail page, 2 00:00:03,000 --> 00:00:06,000 I'll add a new functional component inside 3 00:00:06,000 --> 00:00:08,000 of that meetupId page, 4 00:00:08,000 --> 00:00:11,000 the MeetupDetails component. 5 00:00:11,000 --> 00:00:15,000 And I'll then export this as a default. 6 00:00:15,000 --> 00:00:17,000 Oops, like this. 7 00:00:17,000 --> 00:00:18,000 Not MeetupList. 8 00:00:18,000 --> 00:00:22,000 Like this and then here we return the content 9 00:00:22,000 --> 00:00:24,000 for the MeetupDetails page. 10 00:00:24,000 --> 00:00:26,000 Now, here it's, of course, up to you 11 00:00:26,000 --> 00:00:30,000 how you wanna display the details for a given item. 12 00:00:30,000 --> 00:00:32,000 I will output a fragment, 13 00:00:32,000 --> 00:00:34,000 which we need to import from react 14 00:00:34,000 --> 00:00:38,000 so that we can have multiple adjacent JSX elements. 15 00:00:38,000 --> 00:00:42,000 And I'll then start by outputting the image 16 00:00:42,000 --> 00:00:43,000 of that meetup item 17 00:00:43,000 --> 00:00:46,000 with some src and some alt text. 18 00:00:47,000 --> 00:00:51,000 Now, of course, later we will actually get the concrete data 19 00:00:51,000 --> 00:00:54,000 for a specific meetup item here. 20 00:00:54,000 --> 00:00:58,000 At the moment, we don't really have any meetup data source. 21 00:00:58,000 --> 00:01:01,000 We have this dummy array in the root index.js file 22 00:01:01,000 --> 00:01:03,000 but it's only available in there 23 00:01:03,000 --> 00:01:06,000 and whilst we could export this constant 24 00:01:06,000 --> 00:01:09,000 and then also use it in the MeetupDetail page, 25 00:01:09,000 --> 00:01:10,000 I will not do this here 26 00:01:10,000 --> 00:01:14,000 because we're soon going to connect a real backend anyways. 27 00:01:14,000 --> 00:01:16,000 And therefore, for the moment, 28 00:01:16,000 --> 00:01:18,000 I'll just hard code some data in here 29 00:01:18,000 --> 00:01:21,000 and I'll grab that data from the dummy data though, 30 00:01:21,000 --> 00:01:24,000 so from this DUMMY_MEETUPS array 31 00:01:24,000 --> 00:01:27,000 and I'll copy the image link here 32 00:01:27,000 --> 00:01:29,000 and use that as a source. 33 00:01:29,000 --> 00:01:34,000 And the alt text could be A First Meetup like this. 34 00:01:34,000 --> 00:01:38,000 Then below that, I will add a h1 tag 35 00:01:38,000 --> 00:01:41,000 where I say A First Meetup and then below that, 36 00:01:41,000 --> 00:01:46,000 a paragraph with The meetup description. 37 00:01:46,000 --> 00:01:50,000 And we can also add a address element here, 38 00:01:50,000 --> 00:01:52,000 which is a default HTML element 39 00:01:52,000 --> 00:01:54,000 where we have the address. 40 00:01:56,000 --> 00:01:57,000 Like that. 41 00:01:57,000 --> 00:02:00,000 That could be how we output the MeetupDetails, 42 00:02:00,000 --> 00:02:02,000 for the moment, with some dummy data. 43 00:02:02,000 --> 00:02:06,000 And if I add this here in the MeetupDetails component, 44 00:02:06,000 --> 00:02:08,000 if we reload this MeetupDetails page, 45 00:02:08,000 --> 00:02:10,000 this is what we see. 46 00:02:11,000 --> 00:02:14,000 And that's okay but of course, not the final style 47 00:02:14,000 --> 00:02:16,000 which I'd like to have. 48 00:02:16,000 --> 00:02:19,000 I'd like to center all the text actually 49 00:02:19,000 --> 00:02:24,000 and I would also like to shrink the image a little bit. 50 00:02:24,000 --> 00:02:26,000 Now, for that, I haven't prepared any styles, 51 00:02:26,000 --> 00:02:29,000 so we can just quickly add some styles together here 52 00:02:29,000 --> 00:02:33,000 and for this, I'll actually add a brand new component 53 00:02:33,000 --> 00:02:35,000 in the component's meetups folder, 54 00:02:35,000 --> 00:02:37,000 which I'll name MeetupDetail, 55 00:02:39,000 --> 00:02:42,000 like this and you don't have to create this component. 56 00:02:42,000 --> 00:02:46,000 I just like to keep my page component files pretty lean 57 00:02:46,000 --> 00:02:49,000 and outsource as much JSX code as possible 58 00:02:49,000 --> 00:02:51,000 into standalone components. 59 00:02:51,000 --> 00:02:54,000 But that is not something you have to do. 60 00:02:54,000 --> 00:02:56,000 Nonetheless, I will do it here 61 00:02:56,000 --> 00:02:58,000 and I'll copy that fragment 62 00:02:58,000 --> 00:03:01,000 from the MeetupDetails page component here 63 00:03:01,000 --> 00:03:05,000 and add it to the MeetupDetail single component. 64 00:03:05,000 --> 00:03:09,000 And create that MeetupDetail component here. 65 00:03:10,000 --> 00:03:14,000 And of course, also export MeetupDetail here 66 00:03:14,000 --> 00:03:19,000 and return that JSX code here then like this. 67 00:03:19,000 --> 00:03:22,000 And actually, accept props already 68 00:03:23,000 --> 00:03:26,000 and expect that I get this data through props now 69 00:03:26,000 --> 00:03:30,000 so that the data will be fetched in the page component later 70 00:03:30,000 --> 00:03:32,000 and will then passed into this component, 71 00:03:32,000 --> 00:03:33,000 which is then responsible 72 00:03:33,000 --> 00:03:37,000 for actually presenting the content. 73 00:03:37,000 --> 00:03:40,000 So here we then have props.image. 74 00:03:40,000 --> 00:03:44,000 Here for alt, we could use props.title. 75 00:03:44,000 --> 00:03:49,000 What we then also use here for the h1 tag, props.title. 76 00:03:49,000 --> 00:03:53,000 And here for the address, that would be props.address 77 00:03:54,000 --> 00:03:57,000 and here we have the description. 78 00:03:57,000 --> 00:03:59,000 Props.description. 79 00:04:00,000 --> 00:04:03,000 And on the MeetupDetails page component, 80 00:04:03,000 --> 00:04:07,000 we can now output this MeetupDetail component 81 00:04:07,000 --> 00:04:08,000 we just worked on. 82 00:04:08,000 --> 00:04:09,000 And for this, of course, 83 00:04:09,000 --> 00:04:13,000 import this MeetupDetail component up there. 84 00:04:13,000 --> 00:04:15,000 And now we just need to pass that data, 85 00:04:15,000 --> 00:04:17,000 which we expect in that component 86 00:04:17,000 --> 00:04:21,000 through props into that MeetupDetail component. 87 00:04:22,000 --> 00:04:26,000 So here we can then add the image property 88 00:04:26,000 --> 00:04:28,000 and then use our dummy image link 89 00:04:29,000 --> 00:04:32,000 or our dummy image content here for the moment. 90 00:04:32,000 --> 00:04:34,000 Set the title prop. 91 00:04:34,000 --> 00:04:37,000 First Meetup could be the title. 92 00:04:38,000 --> 00:04:43,000 Set the address prop to Some Street 5, Some City 93 00:04:44,000 --> 00:04:47,000 and last but not least, set the description prop 94 00:04:47,000 --> 00:04:50,000 to this is a first meetup. 95 00:04:51,000 --> 00:04:53,000 And then we can get rid of the fragment 96 00:04:53,000 --> 00:04:56,000 and that JSX content in the page component 97 00:04:56,000 --> 00:04:59,000 and just use the MeetupDetail component here. 98 00:04:59,000 --> 00:05:01,000 Now, why am I doing that? 99 00:05:01,000 --> 00:05:03,000 Again, just to keep the JSX code lean here 100 00:05:03,000 --> 00:05:06,000 and now also for styling reasons. 101 00:05:06,000 --> 00:05:09,000 We could have also imported a CSS file 102 00:05:09,000 --> 00:05:10,000 in the page component. 103 00:05:10,000 --> 00:05:14,000 This would work, it is a regular component after all. 104 00:05:14,000 --> 00:05:16,000 But I like to keep my pages folder lean 105 00:05:16,000 --> 00:05:20,000 and only have the page JS files in there. 106 00:05:20,000 --> 00:05:22,000 Now, for the other components on the other hand, 107 00:05:22,000 --> 00:05:25,000 it is quite common that we pair a JavaScript file 108 00:05:25,000 --> 00:05:27,000 with a CSS file 109 00:05:27,000 --> 00:05:28,000 and again, we could have done that 110 00:05:28,000 --> 00:05:30,000 in the pages folder as well 111 00:05:30,000 --> 00:05:32,000 but I wanna keep that folder leaner. 112 00:05:32,000 --> 00:05:34,000 Here for the components folder, 113 00:05:34,000 --> 00:05:37,000 it is more common to include these CSS files 114 00:05:37,000 --> 00:05:38,000 and hence here I'll now also add 115 00:05:38,000 --> 00:05:43,000 a MeetupDetail.module.css file. 116 00:05:43,000 --> 00:05:46,000 The .module.css is important by the way. 117 00:05:46,000 --> 00:05:50,000 We already used it all the time here silently so to say 118 00:05:50,000 --> 00:05:53,000 because I provided all these components to you 119 00:05:53,000 --> 00:05:55,000 but this actually unlocks a feature 120 00:05:55,000 --> 00:05:58,000 called CSS modules. 121 00:05:58,000 --> 00:06:01,000 It's a feature which you might know from standard React. 122 00:06:01,000 --> 00:06:05,000 It allows you to scope CSS class styles 123 00:06:05,000 --> 00:06:08,000 to a React component and it is supported out 124 00:06:08,000 --> 00:06:11,000 of the box in NextJS projects. 125 00:06:11,000 --> 00:06:14,000 If you name a CSS file like this, 126 00:06:14,000 --> 00:06:17,000 ending with .module.css 127 00:06:17,000 --> 00:06:20,000 and you then import it into your JavaScript file 128 00:06:20,000 --> 00:06:23,000 in a certain way, which I'll show you in a second, 129 00:06:23,000 --> 00:06:28,000 then the CSS styles defined in the CSS file 130 00:06:28,000 --> 00:06:30,000 will be scoped to this component. 131 00:06:30,000 --> 00:06:34,000 At least if you use CSS classes as selectors. 132 00:06:35,000 --> 00:06:37,000 Now, that special way of importing 133 00:06:37,000 --> 00:06:39,000 can bee seen in the other JavaScript files. 134 00:06:39,000 --> 00:06:41,000 It looks like this. 135 00:06:41,000 --> 00:06:45,000 We import classes or however you wanna name it 136 00:06:45,000 --> 00:06:46,000 from the CSS file. 137 00:06:47,000 --> 00:06:49,000 And that's a special way of importing, 138 00:06:49,000 --> 00:06:51,000 which will be picked up by NextJS 139 00:06:51,000 --> 00:06:52,000 and behind the scenes, 140 00:06:52,000 --> 00:06:56,000 it will then transform the CSS classes 141 00:06:56,000 --> 00:07:00,000 so that the class names are unique per component. 142 00:07:00,000 --> 00:07:03,000 And that ensures that your styles can't spill over 143 00:07:03,000 --> 00:07:05,000 to other components. 144 00:07:05,000 --> 00:07:08,000 That's why I also wanted to show this approach here. 145 00:07:09,000 --> 00:07:14,000 So now we can import classes from ./MeetupDetail.module.css 146 00:07:17,000 --> 00:07:22,000 like this and now classes is a JavaScript object in the end 147 00:07:22,000 --> 00:07:26,000 where any CSS classes you define in your CSS file 148 00:07:26,000 --> 00:07:30,000 will be available as properties on this object. 149 00:07:30,000 --> 00:07:31,000 And if you access them, 150 00:07:31,000 --> 00:07:35,000 the values will be the transformed CSS files, 151 00:07:35,000 --> 00:07:37,000 which are guaranteed to be unique. 152 00:07:37,000 --> 00:07:40,000 And that allows you to use the same CSS class names 153 00:07:40,000 --> 00:07:44,000 in different components without clashing with the styles. 154 00:07:45,000 --> 00:07:47,000 And now we could replace Fragment here 155 00:07:47,000 --> 00:07:51,000 with section and give that section a className 156 00:07:51,000 --> 00:07:55,000 of classes.detail let's say like this. 157 00:07:55,000 --> 00:08:00,000 And if we do that, we can now add a detail CSS class here 158 00:08:01,000 --> 00:08:04,000 in the MeetupDetail.module.css file. 159 00:08:04,000 --> 00:08:08,000 And the styles we define in there will then be applied 160 00:08:08,000 --> 00:08:09,000 to this section 161 00:08:09,000 --> 00:08:12,000 because it gets this transformed detail class 162 00:08:12,000 --> 00:08:14,000 under the hood. 163 00:08:14,000 --> 00:08:15,000 And that is a nice feature to have, 164 00:08:15,000 --> 00:08:18,000 which is why I also wanted to show it to you. 165 00:08:19,000 --> 00:08:22,000 Now, with that, we can, for example, 166 00:08:22,000 --> 00:08:26,000 select the image, which is inside of that element 167 00:08:26,000 --> 00:08:29,000 with the detail class, so this image. 168 00:08:29,000 --> 00:08:31,000 We can select this 169 00:08:31,000 --> 00:08:36,000 and then change its look, change its style. 170 00:08:36,000 --> 00:08:39,000 For example, give it a width of 100%, 171 00:08:39,000 --> 00:08:42,000 which ensures that it stays in the box 172 00:08:42,000 --> 00:08:46,000 that is reserved for this page by the layout component. 173 00:08:48,000 --> 00:08:51,000 We can also select the overall detail class again. 174 00:08:52,000 --> 00:08:54,000 So the entire section with that class on it 175 00:08:54,000 --> 00:08:57,000 and set text-align to center 176 00:08:57,000 --> 00:09:00,000 so that all the text elements are centered. 177 00:09:00,000 --> 00:09:03,000 And that could now be our MeetupDetail. 178 00:09:03,000 --> 00:09:04,000 Of course, you can tweak it. 179 00:09:04,000 --> 00:09:06,000 You can add more styles, 180 00:09:06,000 --> 00:09:09,000 you can make sure that it looks the way you want it to look. 181 00:09:09,000 --> 00:09:12,000 I don't wanna turn this into a CSS course. 182 00:09:12,000 --> 00:09:16,000 I just wanted to show you this CSS modules feature 183 00:09:16,000 --> 00:09:18,000 and show you this approach, 184 00:09:18,000 --> 00:09:21,000 which you don't have to use but which I like to use 185 00:09:21,000 --> 00:09:25,000 that I keep my page component files relatively lean, 186 00:09:25,000 --> 00:09:27,000 especially regarding the JSX code 187 00:09:27,000 --> 00:09:31,000 and I instead use embeddable standard React components 188 00:09:31,000 --> 00:09:34,000 for the actual JSX code 189 00:09:34,000 --> 00:09:37,000 and like in this case, for the styling. 190 00:09:37,000 --> 00:09:40,000 And with that, we have our MeetupDetail page in place 191 00:09:40,000 --> 00:09:44,000 and now we've got all these pages here which we need. 192 00:09:44,000 --> 00:09:46,000 Now, with that, we can work 193 00:09:46,000 --> 00:09:50,000 towards replacing that dummy data source, 194 00:09:50,000 --> 00:09:54,000 our dummy array here in the root index.js file 195 00:09:54,000 --> 00:09:58,000 with a real backend, with a real data source.