1 00:00:03,000 --> 00:00:05,454 We're now exporting a "metadata" 2 00:00:05,454 --> 00:00:07,294 object for our HomePage, 3 00:00:07,371 --> 00:00:08,909 setting the "title", 4 00:00:08,909 --> 00:00:11,840 that we can also see in the browser tab. 5 00:00:11,840 --> 00:00:14,755 But, since we only set it in the HomePage, 6 00:00:14,755 --> 00:00:17,690 obviously it won't apply to other pages. 7 00:00:17,690 --> 00:00:20,149 You can see that for the About page 8 00:00:20,149 --> 00:00:23,924 the browser just shows the URL in the tab name, 9 00:00:23,924 --> 00:00:25,765 and same if we look at the 10 00:00:25,765 --> 00:00:27,535 Reviews page for example. 11 00:00:27,605 --> 00:00:30,202 Only the Home page has a title. 12 00:00:30,202 --> 00:00:33,602 Now, we could add some metadata to each page, 13 00:00:33,602 --> 00:00:34,433 like about, 14 00:00:34,509 --> 00:00:37,280 but we can also add it to the layout, 15 00:00:37,280 --> 00:00:40,281 and it will then apply to all pages. 16 00:00:40,281 --> 00:00:43,992 Let's move this metadata out of the HomePage, 17 00:00:43,992 --> 00:00:46,571 and note that, if we save this change, 18 00:00:46,571 --> 00:00:49,495 the HomePage will no longer show a title. 19 00:00:49,495 --> 00:00:52,477 But now let's go and paste the "metadata" 20 00:00:52,477 --> 00:00:54,440 object into the RootLayout. 21 00:00:54,513 --> 00:00:55,500 And if we save, 22 00:00:55,693 --> 00:00:58,524 the HomePage will have a title again. 23 00:00:58,524 --> 00:01:01,970 But it won't be just the HomePage this time. 24 00:01:01,970 --> 00:01:04,105 If we look at the About page, 25 00:01:04,105 --> 00:01:05,912 we need to reload it, because 26 00:01:05,912 --> 00:01:07,220 of the browser cache, 27 00:01:07,283 --> 00:01:09,385 but you can see that this one 28 00:01:09,385 --> 00:01:11,125 also has the same title. 29 00:01:11,198 --> 00:01:13,372 And of course it will be the same 30 00:01:13,372 --> 00:01:15,217 on the Reviews page as well. 31 00:01:15,283 --> 00:01:18,769 So, putting the "metadata" in the RootLayout 32 00:01:18,769 --> 00:01:21,687 is a good way to set default values 33 00:01:21,687 --> 00:01:23,688 that apply to all pages. 34 00:01:23,772 --> 00:01:26,319 But then we may still want a more 35 00:01:26,319 --> 00:01:28,789 specific "title" for some pages. 36 00:01:28,866 --> 00:01:31,698 For example, let's provide some custom 37 00:01:31,698 --> 00:01:33,859 "metadata" for the AboutPage, 38 00:01:33,934 --> 00:01:36,919 and here we can override the "title" 39 00:01:36,919 --> 00:01:38,826 to say "About" instead. 40 00:01:38,909 --> 00:01:41,747 This way, most pages will still have 41 00:01:41,747 --> 00:01:43,875 "Indie Gamer" as the title, 42 00:01:43,954 --> 00:01:47,479 because that's the default set in the RootLayout, 43 00:01:47,479 --> 00:01:49,706 but if we look at the About page, 44 00:01:49,706 --> 00:01:52,803 this one has its own different title. 45 00:01:52,803 --> 00:01:55,902 So each page can effectively override 46 00:01:55,902 --> 00:01:59,000 the default values set in the layout. 47 00:01:59,084 --> 00:02:02,008 Now, when writing the "title" for a page, 48 00:02:02,008 --> 00:02:04,431 it's common practice to always 49 00:02:04,431 --> 00:02:06,449 include the website name, 50 00:02:06,530 --> 00:02:08,470 in our case "Indie Gamer", 51 00:02:08,470 --> 00:02:11,710 in addition to the page-specific name. 52 00:02:11,710 --> 00:02:14,328 This is useful both for users, 53 00:02:14,328 --> 00:02:16,708 so they can easily tell which 54 00:02:16,708 --> 00:02:18,759 site each tab belongs to, 55 00:02:18,841 --> 00:02:21,758 and for Search Engine Optimization. 56 00:02:21,758 --> 00:02:24,491 But this means we would need to duplicate 57 00:02:24,491 --> 00:02:26,158 this "Indie Gamer" string 58 00:02:26,225 --> 00:02:29,582 in all the pages where we set a custom title. 59 00:02:29,582 --> 00:02:32,165 To avoid this, Next.js provides 60 00:02:32,165 --> 00:02:34,415 a way to define a template. 61 00:02:34,499 --> 00:02:37,469 Instead of setting the "title" as a string, 62 00:02:37,469 --> 00:02:41,341 we can use an object, that has a "default" value. 63 00:02:41,341 --> 00:02:44,031 And then we can add a "template" property 64 00:02:44,121 --> 00:02:48,655 where we can write "%s" followed by "Indie Gamer". 65 00:02:48,655 --> 00:02:51,746 "%s" here is a placeholder 66 00:02:51,746 --> 00:02:55,528 that will be replaced by the page-specific title. 67 00:02:55,528 --> 00:02:57,563 Let's see how it works now. 68 00:02:57,588 --> 00:03:00,404 You can see that the About page shows 69 00:03:00,404 --> 00:03:03,807 "About" followed by "Indie Gamer" twice. 70 00:03:03,807 --> 00:03:06,283 That's because, in the AboutPage, 71 00:03:06,283 --> 00:03:09,083 we were already appending "Indie Gamer", 72 00:03:09,083 --> 00:03:10,451 but if we remove it, 73 00:03:11,063 --> 00:03:14,086 the title is now "About | Indie Gamer". 74 00:03:14,086 --> 00:03:17,397 So, it's inserting the title from this page 75 00:03:17,397 --> 00:03:19,524 into the template string we 76 00:03:19,524 --> 00:03:21,572 defined in the RootLayout. 77 00:03:21,651 --> 00:03:24,166 This means we can more easily set 78 00:03:24,166 --> 00:03:26,453 a custom title on other pages, 79 00:03:26,529 --> 00:03:28,560 like the ReviewsPage. 80 00:03:28,560 --> 00:03:31,456 We can simply change it to "Reviews" here, 81 00:03:31,456 --> 00:03:32,577 and if we save, 82 00:03:33,016 --> 00:03:36,452 the Reviews page should update, if we reload it, 83 00:03:36,452 --> 00:03:40,314 and display "Reviews" followed by "Indie Gamer". 84 00:03:40,314 --> 00:03:42,847 So the template always appends the 85 00:03:42,847 --> 00:03:44,859 website name automatically. 86 00:03:44,933 --> 00:03:47,720 It's a simple feature, but it's quite useful. 87 00:03:47,720 --> 00:03:50,915 Note that the "default" value will still apply 88 00:03:50,915 --> 00:03:54,372 to any page that doesn't have a custom title, 89 00:03:54,372 --> 00:03:56,631 like the HomePage for example.