1 00:00:02,000 --> 00:00:03,000 Now in the last lecture 2 00:00:03,000 --> 00:00:06,000 we added to the _appJS file. 3 00:00:06,000 --> 00:00:09,000 There is an important implication of this. 4 00:00:09,000 --> 00:00:12,000 Now we have to have the element there in appJS 5 00:00:12,000 --> 00:00:14,000 and we of course still also have it 6 00:00:14,000 --> 00:00:15,000 in our page components. 7 00:00:15,000 --> 00:00:17,000 In indexJS in the events folder, 8 00:00:17,000 --> 00:00:20,000 for example, I also have . 9 00:00:20,000 --> 00:00:23,000 And as you see on the rendered page, both is applied. 10 00:00:23,000 --> 00:00:27,000 The title and description from the page component 11 00:00:27,000 --> 00:00:30,000 and the viewport from the _appJS file. 12 00:00:30,000 --> 00:00:32,000 And this is important, 13 00:00:32,000 --> 00:00:37,000 NextJS automatically merges multiple elements. 14 00:00:37,000 --> 00:00:40,000 So if you set a here in _appJS, 15 00:00:40,000 --> 00:00:42,000 and then also in the page component, 16 00:00:42,000 --> 00:00:46,000 the content of those different sections gets merged. 17 00:00:46,000 --> 00:00:49,000 Even if we would have multiple sections here 18 00:00:49,000 --> 00:00:51,000 inside of a single component, 19 00:00:51,000 --> 00:00:54,000 the content would be merged by NextJS. 20 00:00:54,000 --> 00:00:57,000 But of course that means that we could also have conflicts. 21 00:00:57,000 --> 00:01:01,000 For example, I could have a another set here 22 00:01:01,000 --> 00:01:06,000 for whatever reasons, and now I set a <title> here and here. 23 00:01:06,000 --> 00:01:09,000 Now NextJS automatically merges your <Head> sections, 24 00:01:09,000 --> 00:01:13,000 and it also resolves such conflicts. 25 00:01:13,000 --> 00:01:17,000 If I add multiple titles here and I reload this Events page, 26 00:01:17,000 --> 00:01:22,000 you see only one title shows up here, not multiple titles. 27 00:01:23,000 --> 00:01:25,000 It simply takes the latest element, 28 00:01:25,000 --> 00:01:28,000 if you have to same element multiple times. 29 00:01:28,000 --> 00:01:31,000 So if we have the <title> here and here, 30 00:01:31,000 --> 00:01:33,000 the second <title> wins. 31 00:01:33,000 --> 00:01:34,000 The same would be true for meta elements 32 00:01:34,000 --> 00:01:37,000 with a name attribute. 33 00:01:37,000 --> 00:01:38,000 If you have other <Head> content, 34 00:01:38,000 --> 00:01:40,000 which is neither a title 35 00:01:40,000 --> 00:01:43,000 nor a meta element with the name attribute, 36 00:01:43,000 --> 00:01:47,000 but let's say a meta element with some other attributes, 37 00:01:47,000 --> 00:01:50,000 then you can always add a manual key here, 38 00:01:51,000 --> 00:01:55,000 like description to still allow NextJS 39 00:01:55,000 --> 00:01:58,000 to find out if two elements are clashing. 40 00:01:58,000 --> 00:02:01,000 And then, again, the latter one will win. 41 00:02:01,000 --> 00:02:04,000 Now, of course, this is redundant code here, this extra head 42 00:02:04,000 --> 00:02:08,000 I just wanted to show this NextJS behavior. 43 00:02:08,000 --> 00:02:11,000 And that it does have an important implication 44 00:02:11,000 --> 00:02:15,000 because it means that in _appJS, we can indeed 45 00:02:15,000 --> 00:02:18,000 also go into the head section we set up there, 46 00:02:18,000 --> 00:02:22,000 and define a general title that applies to all pages, 47 00:02:22,000 --> 00:02:24,000 unless it's overwritten. 48 00:02:24,000 --> 00:02:27,000 This ensures that we always have a title on every page, 49 00:02:27,000 --> 00:02:30,000 even if we forget to set a page specific one, 50 00:02:30,000 --> 00:02:33,000 which we, of course, typically want to do. 51 00:02:33,000 --> 00:02:37,000 So here, I'll then give all my pages a general title, 52 00:02:37,000 --> 00:02:41,000 and also a general description. 53 00:02:41,000 --> 00:02:44,000 Again, that will be overwritten by the page specific data, 54 00:02:44,000 --> 00:02:47,000 but in case we don't have page specific data, 55 00:02:47,000 --> 00:02:50,000 then this general data would kick in. 56 00:02:50,000 --> 00:02:53,000 So here I have my general <Head> setup, 57 00:02:53,000 --> 00:02:57,000 but if I reload this All Events page, 58 00:02:57,000 --> 00:02:58,000 we don't see that there. 59 00:02:58,000 --> 00:03:01,000 Because we do have page specific data here, 60 00:03:01,000 --> 00:03:06,000 and that then overrides the more general data. 61 00:03:06,000 --> 00:03:08,000 Because the page component is rendered 62 00:03:08,000 --> 00:03:10,000 after the app component. 63 00:03:10,000 --> 00:03:12,000 So the later <Head> section wins 64 00:03:12,000 --> 00:03:13,000 and that will be the head section, 65 00:03:13,000 --> 00:03:15,000 instead of the page component.