1 00:00:03,000 --> 00:00:05,369 We introduced a custom App component, 2 00:00:05,369 --> 00:00:07,482 where we keep the common elements 3 00:00:08,047 --> 00:00:09,428 so that in each page 4 00:00:09,428 --> 00:00:10,947 we only keep the parts 5 00:00:10,947 --> 00:00:13,088 that are specific to that page. 6 00:00:13,727 --> 00:00:15,227 Now, there's something else 7 00:00:15,227 --> 00:00:17,616 that we typically want to add to each page. 8 00:00:18,172 --> 00:00:19,359 And that's a title. 9 00:00:19,859 --> 00:00:21,716 You can see that at the moment, 10 00:00:21,716 --> 00:00:24,113 the browser tab simply displays the URL. 11 00:00:24,672 --> 00:00:26,323 And it's the same if we look 12 00:00:26,323 --> 00:00:27,856 at the About page as well. 13 00:00:28,414 --> 00:00:30,178 That's because in our pages 14 00:00:30,178 --> 00:00:32,661 at the moment we don't define a title. 15 00:00:33,226 --> 00:00:35,424 And I mean the "title" element 16 00:00:35,424 --> 00:00:38,206 that you can put inside the "head" tag 17 00:00:38,206 --> 00:00:39,085 in the HTML. 18 00:00:39,085 --> 00:00:41,429 It's simply not present in here. 19 00:00:42,149 --> 00:00:44,322 How can we add a title to each page? 20 00:00:44,822 --> 00:00:46,713 It's slightly tricky because 21 00:00:46,713 --> 00:00:49,077 our components are usually rendered 22 00:00:49,077 --> 00:00:51,239 inside the body of the document. 23 00:00:51,239 --> 00:00:52,861 But in this case we need 24 00:00:52,861 --> 00:00:55,630 to add something to the head of the HTML. 25 00:00:56,401 --> 00:00:58,129 Thankfully Next.js provides 26 00:00:58,129 --> 00:00:59,281 a "Head" component 27 00:00:59,845 --> 00:01:00,744 that we can use 28 00:01:00,744 --> 00:01:02,243 exactly for this purpose. 29 00:01:02,978 --> 00:01:05,226 We can put this "Head" component 30 00:01:05,226 --> 00:01:08,108 wherever we want inside our JSX elements. 31 00:01:08,108 --> 00:01:10,427 And anything we write inside here 32 00:01:10,427 --> 00:01:13,028 will be added to the document "head". 33 00:01:13,739 --> 00:01:15,779 So we can use this to set a "title", 34 00:01:16,279 --> 00:01:17,750 for example "My Blog". 35 00:01:18,250 --> 00:01:19,387 And once we save this, 36 00:01:19,887 --> 00:01:20,940 you can see that 37 00:01:20,940 --> 00:01:22,784 the title in the browser tab 38 00:01:22,784 --> 00:01:24,167 changed to "My Blog". 39 00:01:24,799 --> 00:01:26,483 Also, if we go and look inside 40 00:01:26,483 --> 00:01:27,550 the document "head" 41 00:01:28,365 --> 00:01:30,236 there is now a "title" element, 42 00:01:30,236 --> 00:01:32,650 exactly as we wrote it in our component. 43 00:01:33,211 --> 00:01:35,503 This can be used to set any elements 44 00:01:35,503 --> 00:01:37,158 that go inside the "head", 45 00:01:37,722 --> 00:01:39,609 so in addition to the "title" 46 00:01:39,609 --> 00:01:41,236 we could set a "meta" tag 47 00:01:41,236 --> 00:01:42,537 with a "description" 48 00:01:43,168 --> 00:01:45,034 which is something that can be useful 49 00:01:45,034 --> 00:01:45,992 for search engines. 50 00:01:47,234 --> 00:01:49,304 Let's just write "This is my blog", 51 00:01:49,304 --> 00:01:50,132 as an example. 52 00:01:51,300 --> 00:01:53,797 And that "meta" tag is of course added 53 00:01:53,797 --> 00:01:55,178 to the document head. 54 00:01:55,744 --> 00:01:58,245 It's been added dynamically here, 55 00:01:58,245 --> 00:02:00,821 because we're running in dev mode, 56 00:02:00,821 --> 00:02:03,550 but remember that Next.js will build 57 00:02:03,550 --> 00:02:05,975 static HTML pages for production 58 00:02:05,975 --> 00:02:08,021 so this tag will be present 59 00:02:08,021 --> 00:02:09,461 in the static HTML, 60 00:02:09,461 --> 00:02:12,266 which will be used by search engines. 61 00:02:13,221 --> 00:02:14,917 Anyway, for this simple blog 62 00:02:14,917 --> 00:02:17,341 we don't really need to worry about SEO. 63 00:02:17,902 --> 00:02:19,423 Let's just keep the "title". 64 00:02:19,923 --> 00:02:22,119 Ok. Now let's go and add the same 65 00:02:22,119 --> 00:02:23,850 to the About page as well. 66 00:02:24,417 --> 00:02:26,022 Let me show that page in the browser. 67 00:02:28,050 --> 00:02:30,223 So we can paste our "Head" section. 68 00:02:30,723 --> 00:02:32,826 And we can simply change the title 69 00:02:32,826 --> 00:02:33,754 to say "About". 70 00:02:34,316 --> 00:02:35,738 We also need to import 71 00:02:35,738 --> 00:02:37,160 this "Head" component. 72 00:02:37,725 --> 00:02:38,795 And that should be that. 73 00:02:39,925 --> 00:02:41,087 You can see our new title 74 00:02:41,087 --> 00:02:42,436 displayed in the browser tab, 75 00:02:42,983 --> 00:02:44,152 just as we expected. 76 00:02:44,652 --> 00:02:45,817 Note that the title 77 00:02:45,817 --> 00:02:47,534 will also change dynamically 78 00:02:48,096 --> 00:02:49,794 when we navigate from one page 79 00:02:49,794 --> 00:02:50,530 to the other. 80 00:02:51,087 --> 00:02:53,004 Even though, as we've seen 81 00:02:53,004 --> 00:02:56,175 this kind of navigation happens client-side 82 00:02:56,175 --> 00:02:59,641 without reloading the HTML page from the server 83 00:02:59,641 --> 00:03:01,559 the Next.js Head component 84 00:03:01,559 --> 00:03:04,066 will dynamically update the values 85 00:03:04,066 --> 00:03:06,058 inside the document "head". 86 00:03:06,927 --> 00:03:08,632 And that's all for this video. 87 00:03:09,132 --> 00:03:10,564 The Head component is 88 00:03:10,564 --> 00:03:11,860 very simple to use, 89 00:03:11,860 --> 00:03:13,224 but also very useful 90 00:03:13,224 --> 00:03:14,997 for setting the page title 91 00:03:14,997 --> 00:03:16,362 and other meta tags.