Prevent Global Styles from Leaking Into Keystatic

[00:00] Each of our posts now has the authors listed and what we want to do is link the author to an author page. This is our list of authors, so let's wrap the h three in a link tag from Next. Js. The h ref will be slash authors slash and then we'll pass [00:20] the author dot slug. And I need to make sure that I import link from next link. And now the author names are links and if I click on 1, we should have a 4 zero four page because we haven't created the authors slash slug route. So let's go ahead and create that. So inside app, I will create [00:39] a file which will sit inside authors slash brackets slug slash and the file is page dot tsx. And here I'll export default async because we want a server component, function author page, and let's just return for now a div with an h [00:59] one that says author page. There it is. And you can see here we are on the Simon slug and the way we can get this slug is with the params. And here we want the slug param, which is a string. So I can destructure the slug from params. [01:19] And if we don't have a slug, we're going to render the not found route from next navigation. If we do have a slug, we will return author page and let's add for slug. And there we go. Author page for Simon, author page for Jed, and right now this [01:39] is not connected to key static data. So, if I had any gibberish, the page would still work. So, we are going to wire this page with key static data, but before we do so, we need to take care of some styling problems here. You can see the other pages like the homepage or the single post page use a different font [01:59] family, use some spacing, and this is all coming from this global styles dot CSS file that has a minimal amount of default styling. And if we look at what happens right now, our homepage, which is these templates, imports the styles and then our post slug does not import the styles, but it has its own layout [02:19] which imports the styles. And so if we wanted to make it work, we could copy this layout file in the author slash slug folder. And here, I'd need to adjust relative path to that style file. Now, if I visit, the author page, we would have the matching styles. But we definitely [02:39] don't want to duplicate this layout for each page. And you might wonder if I close all of these, why we're not importing the styles in the root layout at the root level of our app directory. Why don't we here import the styles dot CSS file? Because the rest of the layout is the same, which means that [02:59] we could remove the import of the styles in the homepage. We could remove the layout for the individual post pages and remove the author slug layout that we've just created. And if I hard refresh this, this is the homepage, this is the single post page, and this is the author page and [03:19] everything still works with only one layout. Great. But let's see what happens if we visit the key static route. Uh-oh. You can see that our spacing vertical and horizontal, which is defined in the global styles here, is also affecting the key static admin UI because the key static routes sit in the app directory just [03:38] like our other routes. And so, obviously, we don't want this. We want to let key static do its own styling and only apply our styles to the front end pages or the website. In other words, we kind of wanna scope out the key static directory and the API directory, which is also for key static routes, when [03:58] we define our layout with the styles dot CSS file. And Next. Js has this concept of route groups, which will allow you to scope a layout to a specific set of routes. All you have to do is create a folder name with parenthesis, just like that. And so, let's create this website or site group [04:18] so we can leave key static alone and only focus on our front end routes. Inside app, I'll create a folder and in parenthesis, we'll have site. Now I want to move everything except key static routes in there. So the slug, which is for and, yes, I'll update the imports. So this is for the individual [04:38] blog posts. I want the authors also inside. Yes. And I want my route layout, my home page, and the styles dot CSS file also inside this site folder. So now if I collapse the site, all we have left is the key static and key static API routes and a reader util. So the [04:58] homepage inherits the style, the blog post page inherits the styles, and so does the author page. But if I visit the key static route, none of the styles have made it through. Perfect.