Now at this point,
we're almost done with this application
and with exploring all these routing
and page rendering related essential features,
and also partially a bit more advanced features
NextJS has to offer.
But there still is one main feature,
one main routing related feature
I'd like to add to this application.
Because in this application we have this starting page,
which still only has some dummy content here
or this initial dummy content,
so we'll change this soon,
and we have this root layout file.
And therefore, as a consequence,
if we click on this logo here
to be taken back to the starting page,
we see that initial dummy content there
and we see that main navigation.
Now, that's not horrible,
but it is quite common to have a landing page,
a starting page on a website
that might have a different look or a different navigation
or no navigation at all, unlike the rest of the website.
So therefore, here I wanna update the starting page content.
And for that attached, you find an updated page.js file,
and you can simply replace the content in your page.js
folder with that updated page.js file content.
And if you then save that,
you should see a starting page that looks like this.
But now I got my link to the news down here,
and therefore, I actually don't want to have
that navigation on that starting page here.
But the problem of course, is that that navigation
is part of the root layout, so every page has it.
So, what I wanna achieve here
is that I have a different root layout
for the starting page than for the rest of this application.
And that's something you can achieve in NextJS
with help of a feature called route groups.
A route group is set up
by adding a new folder in your app folder,
and that could be a folder
nested in some other route as well,
but here I'll do it right on the top level
of this app folder.
And then you use parentheses, regular parentheses,
and between those parentheses, any name of your choice.
Like for example, content.
And this now creates a route group.
It does not add anything to the URL path,
unlike other folders like archive or news.
But instead, it creates a route group,
which means you can now move routes into that folder.
And I'll do that here.
I'll move my archive and news routes
and all their nested routes into this content folder.
Now, what's the advantage of creating such a route group?
Well, such a route group now allows you
to set up a dedicated layout,
in this case,
since it's directly at the root of the app folder,
a dedicated root layout.
But as I mentioned, you could do this with nested paths
and nested layouts as well,
which will only apply to the routes
that are part of that group.
So I will move that layout.js file
into this content folder as well.
Now, of course, with that,
the starting page wouldn't have a layout anymore,
and therefore, I'll create a second route group,
which I'll name marketing,
because it will hold a separate layout
for all the marketing related pages you could say,
like the landing page.
And of course that name between the parentheses
is up to you, as mentioned.
So now I'll actually copy the layout.js file
from that content route group
into the marketing route group,
and I'll keep the same structure there,
but I'll remove the main header.
I don't want to have that there anymore.
In addition, I'll remove this div with an ID of page.
And we now also should remove the main header import here
and adjust this globals.css import path
because since we're in a sub folder now,
in the marketing folder and the globals.css file
is one level above that,
we have to go up one level here in this import path.
And the same is true
for the layout.js file in the content folder.
There, I'll keep the main header and I'll keep that div,
but the import path of globals.css must be adjusted.
So now we have two root layouts that belong
to different route groups and they render different content.
Now that starting page.js file
therefore also goes into this marketing route group folder,
so that the only route in that folder is this starting page,
though we could of course add more routes there
if we wanted to.
But in my case here, all the other routes
are part of that other route group, the content route group.
And every route group has its own layout.
Now, to finish this up, we just also have
to actually move the not found page somewhere else
because if you're setting up such route groups,
you can't have any other pages, including not found pages,
on the same level as the route groups.
Instead, they must belong to a route group.
And therefore, I'll add this into my content folder,
this not-found.js file, so that now in the app folder,
I just have these two route groups
and the fab icon and the globals.css file,
and then the routes are inside of the route groups.
With all that, if you save everything
and you reload the starting page,
you now see that the navigation is gone there
just as it should be.
But if I click read the latest news,
I am taken to the news page and the header is back
because we're now inside of a different route group,
which has a different root layout.
And therefore, this route group feature can be very useful
if you wanna set up different layouts for different pages
or for different routes.