1 00:00:00,000 --> 00:00:02,000 Now at this point, 2 00:00:02,000 --> 00:00:05,000 we're almost done with this application 3 00:00:05,000 --> 00:00:07,000 and with exploring all these routing 4 00:00:07,000 --> 00:00:11,000 and page rendering related essential features, 5 00:00:11,000 --> 00:00:14,000 and also partially a bit more advanced features 6 00:00:14,000 --> 00:00:16,000 NextJS has to offer. 7 00:00:16,000 --> 00:00:20,000 But there still is one main feature, 8 00:00:20,000 --> 00:00:23,000 one main routing related feature 9 00:00:23,000 --> 00:00:25,000 I'd like to add to this application. 10 00:00:25,000 --> 00:00:29,000 Because in this application we have this starting page, 11 00:00:29,000 --> 00:00:33,000 which still only has some dummy content here 12 00:00:33,000 --> 00:00:34,000 or this initial dummy content, 13 00:00:34,000 --> 00:00:36,000 so we'll change this soon, 14 00:00:36,000 --> 00:00:40,000 and we have this root layout file. 15 00:00:40,000 --> 00:00:42,000 And therefore, as a consequence, 16 00:00:42,000 --> 00:00:45,000 if we click on this logo here 17 00:00:45,000 --> 00:00:48,000 to be taken back to the starting page, 18 00:00:48,000 --> 00:00:50,000 we see that initial dummy content there 19 00:00:50,000 --> 00:00:53,000 and we see that main navigation. 20 00:00:53,000 --> 00:00:56,000 Now, that's not horrible, 21 00:00:56,000 --> 00:01:00,000 but it is quite common to have a landing page, 22 00:01:00,000 --> 00:01:02,000 a starting page on a website 23 00:01:02,000 --> 00:01:07,000 that might have a different look or a different navigation 24 00:01:07,000 --> 00:01:12,000 or no navigation at all, unlike the rest of the website. 25 00:01:13,000 --> 00:01:18,000 So therefore, here I wanna update the starting page content. 26 00:01:18,000 --> 00:01:23,000 And for that attached, you find an updated page.js file, 27 00:01:23,000 --> 00:01:26,000 and you can simply replace the content in your page.js 28 00:01:26,000 --> 00:01:30,000 folder with that updated page.js file content. 29 00:01:32,000 --> 00:01:34,000 And if you then save that, 30 00:01:34,000 --> 00:01:36,000 you should see a starting page that looks like this. 31 00:01:38,000 --> 00:01:41,000 But now I got my link to the news down here, 32 00:01:41,000 --> 00:01:44,000 and therefore, I actually don't want to have 33 00:01:44,000 --> 00:01:47,000 that navigation on that starting page here. 34 00:01:48,000 --> 00:01:50,000 But the problem of course, is that that navigation 35 00:01:50,000 --> 00:01:55,000 is part of the root layout, so every page has it. 36 00:01:55,000 --> 00:01:58,000 So, what I wanna achieve here 37 00:01:58,000 --> 00:02:02,000 is that I have a different root layout 38 00:02:02,000 --> 00:02:06,000 for the starting page than for the rest of this application. 39 00:02:06,000 --> 00:02:08,000 And that's something you can achieve in NextJS 40 00:02:08,000 --> 00:02:12,000 with help of a feature called route groups. 41 00:02:13,000 --> 00:02:15,000 A route group is set up 42 00:02:15,000 --> 00:02:19,000 by adding a new folder in your app folder, 43 00:02:19,000 --> 00:02:20,000 and that could be a folder 44 00:02:20,000 --> 00:02:22,000 nested in some other route as well, 45 00:02:22,000 --> 00:02:25,000 but here I'll do it right on the top level 46 00:02:25,000 --> 00:02:27,000 of this app folder. 47 00:02:27,000 --> 00:02:31,000 And then you use parentheses, regular parentheses, 48 00:02:31,000 --> 00:02:35,000 and between those parentheses, any name of your choice. 49 00:02:35,000 --> 00:02:38,000 Like for example, content. 50 00:02:39,000 --> 00:02:42,000 And this now creates a route group. 51 00:02:42,000 --> 00:02:45,000 It does not add anything to the URL path, 52 00:02:45,000 --> 00:02:49,000 unlike other folders like archive or news. 53 00:02:49,000 --> 00:02:51,000 But instead, it creates a route group, 54 00:02:51,000 --> 00:02:55,000 which means you can now move routes into that folder. 55 00:02:55,000 --> 00:02:56,000 And I'll do that here. 56 00:02:56,000 --> 00:02:58,000 I'll move my archive and news routes 57 00:02:58,000 --> 00:03:02,000 and all their nested routes into this content folder. 58 00:03:04,000 --> 00:03:07,000 Now, what's the advantage of creating such a route group? 59 00:03:07,000 --> 00:03:10,000 Well, such a route group now allows you 60 00:03:10,000 --> 00:03:12,000 to set up a dedicated layout, 61 00:03:12,000 --> 00:03:14,000 in this case, 62 00:03:14,000 --> 00:03:16,000 since it's directly at the root of the app folder, 63 00:03:16,000 --> 00:03:19,000 a dedicated root layout. 64 00:03:19,000 --> 00:03:23,000 But as I mentioned, you could do this with nested paths 65 00:03:23,000 --> 00:03:24,000 and nested layouts as well, 66 00:03:24,000 --> 00:03:27,000 which will only apply to the routes 67 00:03:27,000 --> 00:03:29,000 that are part of that group. 68 00:03:29,000 --> 00:03:32,000 So I will move that layout.js file 69 00:03:32,000 --> 00:03:35,000 into this content folder as well. 70 00:03:35,000 --> 00:03:36,000 Now, of course, with that, 71 00:03:36,000 --> 00:03:39,000 the starting page wouldn't have a layout anymore, 72 00:03:39,000 --> 00:03:41,000 and therefore, I'll create a second route group, 73 00:03:41,000 --> 00:03:44,000 which I'll name marketing, 74 00:03:44,000 --> 00:03:47,000 because it will hold a separate layout 75 00:03:47,000 --> 00:03:51,000 for all the marketing related pages you could say, 76 00:03:51,000 --> 00:03:52,000 like the landing page. 77 00:03:52,000 --> 00:03:54,000 And of course that name between the parentheses 78 00:03:54,000 --> 00:03:57,000 is up to you, as mentioned. 79 00:03:57,000 --> 00:04:02,000 So now I'll actually copy the layout.js file 80 00:04:02,000 --> 00:04:04,000 from that content route group 81 00:04:04,000 --> 00:04:07,000 into the marketing route group, 82 00:04:07,000 --> 00:04:09,000 and I'll keep the same structure there, 83 00:04:09,000 --> 00:04:11,000 but I'll remove the main header. 84 00:04:11,000 --> 00:04:14,000 I don't want to have that there anymore. 85 00:04:15,000 --> 00:04:19,000 In addition, I'll remove this div with an ID of page. 86 00:04:21,000 --> 00:04:25,000 And we now also should remove the main header import here 87 00:04:25,000 --> 00:04:28,000 and adjust this globals.css import path 88 00:04:28,000 --> 00:04:30,000 because since we're in a sub folder now, 89 00:04:30,000 --> 00:04:34,000 in the marketing folder and the globals.css file 90 00:04:34,000 --> 00:04:35,000 is one level above that, 91 00:04:35,000 --> 00:04:39,000 we have to go up one level here in this import path. 92 00:04:39,000 --> 00:04:41,000 And the same is true 93 00:04:41,000 --> 00:04:44,000 for the layout.js file in the content folder. 94 00:04:44,000 --> 00:04:48,000 There, I'll keep the main header and I'll keep that div, 95 00:04:48,000 --> 00:04:53,000 but the import path of globals.css must be adjusted. 96 00:04:55,000 --> 00:04:58,000 So now we have two root layouts that belong 97 00:04:58,000 --> 00:05:03,000 to different route groups and they render different content. 98 00:05:04,000 --> 00:05:06,000 Now that starting page.js file 99 00:05:06,000 --> 00:05:10,000 therefore also goes into this marketing route group folder, 100 00:05:10,000 --> 00:05:14,000 so that the only route in that folder is this starting page, 101 00:05:14,000 --> 00:05:17,000 though we could of course add more routes there 102 00:05:17,000 --> 00:05:18,000 if we wanted to. 103 00:05:19,000 --> 00:05:21,000 But in my case here, all the other routes 104 00:05:21,000 --> 00:05:25,000 are part of that other route group, the content route group. 105 00:05:25,000 --> 00:05:29,000 And every route group has its own layout. 106 00:05:29,000 --> 00:05:32,000 Now, to finish this up, we just also have 107 00:05:32,000 --> 00:05:35,000 to actually move the not found page somewhere else 108 00:05:35,000 --> 00:05:37,000 because if you're setting up such route groups, 109 00:05:37,000 --> 00:05:42,000 you can't have any other pages, including not found pages, 110 00:05:42,000 --> 00:05:44,000 on the same level as the route groups. 111 00:05:44,000 --> 00:05:47,000 Instead, they must belong to a route group. 112 00:05:47,000 --> 00:05:50,000 And therefore, I'll add this into my content folder, 113 00:05:50,000 --> 00:05:54,000 this not-found.js file, so that now in the app folder, 114 00:05:54,000 --> 00:05:56,000 I just have these two route groups 115 00:05:56,000 --> 00:05:59,000 and the fab icon and the globals.css file, 116 00:05:59,000 --> 00:06:02,000 and then the routes are inside of the route groups. 117 00:06:03,000 --> 00:06:06,000 With all that, if you save everything 118 00:06:06,000 --> 00:06:08,000 and you reload the starting page, 119 00:06:08,000 --> 00:06:11,000 you now see that the navigation is gone there 120 00:06:11,000 --> 00:06:14,000 just as it should be. 121 00:06:14,000 --> 00:06:17,000 But if I click read the latest news, 122 00:06:17,000 --> 00:06:21,000 I am taken to the news page and the header is back 123 00:06:21,000 --> 00:06:24,000 because we're now inside of a different route group, 124 00:06:24,000 --> 00:06:27,000 which has a different root layout. 125 00:06:27,000 --> 00:06:30,000 And therefore, this route group feature can be very useful 126 00:06:30,000 --> 00:06:35,000 if you wanna set up different layouts for different pages 127 00:06:35,000 --> 00:06:37,000 or for different routes.