 Hello friends, it's December and that means React holiday. If you're not following along with my newsletter, check out react.holiday. Today I'm going to show you all of the things that we've covered in week one that pertain to the next beta app directory router, whatever all the new hotness is. I want to show you how to install it. I want to show you how to create new pages, layouts, head, and the difference between server components and client components. So we're going to cover all of that. I'm going to show you every step of the way right now. OK, so first and foremost, you want to make sure you have the right docs. Here I have gone to, what is it, beta.nextjs.org slash docs and get there without the docs there. And right here it says you are viewing the docs for the app directory beta. Now next 13 right here, you can see that there's a next 13 beta stable release version. And that does not include the apps directory stuff, which we're talking about today. So these are the beta docs. If we give ourselves a little bit more space, we should see the sidebar. OK, I mean, let's go through it to here installation. And note that we're using this dash dash experimental app flag. Now what that's going to do is enable the experimental feature and scaffold out in a sample app directory. So copy that, we'll paste that over into our terminal and hit go. Call this React. And would you like to use TypeScript? I'll say no. So no TypeScript for me today. Would you like to use ESLint? Sure, why not? I like it. So let's CD into that new directory. I think we called it React Holiday. And we'll open this up in VS Code. Let's check out what we have. So one of the first things you need to know is next JS config, you'll see this configuration for our experimental app directory that's set to true. That's one of the things that this experimental flag did for us. The second thing is to create this app directory. So we have a CSS, a head JS file, a layout JS file, a page file, and a page.modules.css file. Now all of these are super important, but we're going to cover them by making our own versions of these things. Okay, so first things first, let's set up an about page. We'll make a new file. This will be in the about route folder and we'll do page.jsx. Okay, now if you've used Next before, you know that typically you can just make a file called about.jsx and that will turn into a page. In the app directory, that is not the case. We need to create a directory with that name and then a page.jsx file. Export default function about page, and return an h1, it just says, fantastic. Let's kick off a server, npm run dev, and visit that page, localhost 3000. All right, we're seeing next here, we can go to our about route right here and we got our page, killer. So that's the first thing you need to know. You have to have a page file and then use the directory as the name. Now, second thing, let's talk about these head files. Right now, if I open up this sidebar, we just see this create next app as the title. Well, we can change that if we want to by adding a new file site. This is another special file in this new router, head.jsx. Let's export another component, default function about head and we will return a fragment that has a title in it. This will be about, fantastic. And then we use a fragment so that we can also, if we want to make a meta description, we can add another tag. Fun info, facts, fun facts about, fantastic. It updated to say about, fantastic. That's great. Now, one thing that you will need to know is this. Let's check out, let's open up our inspector, give ourselves a little bit more space. If we open up this head, look what happens. So we have some stuff that the next is gonna put in this head no matter what. And we have our title and description as we expect, but there was some stuff that didn't come along. Our head, the one that comes from the application has all these other tags. If we actually delete this file, we'll see that sure, our title and stuff go away, but we get these tags come back that we didn't have before when we were replacing the head. So it's something that you need to keep in mind if you have head tags that you wanna share, you're gonna have to put those in another fragment somewhere and then import those into all of the layouts that you want them in. Okay, so on the topic of layouts, we actually have a new layout file that we can add to this route that's going to insert a layout around our page component. So this is pretty neat. Let's see what we have right now in terms of our document structure. We have all this next stuff and then directly we have this H1. Well, let's add a layout file and see what changes here. We'll new file layout.jsx and we will export default function about layout and return a main element. How about that? Now, these layout files need to take children and place them inside of the document. This is a good thing that this doesn't happen automatically because these layouts may become like really advanced. So we're gonna put our children right inside of our main there, save that and then see what changed. So if we go in here, now we have a main wrapper element and then we have our content inside, which is really cool. Now I said that things might get a little bit more complicated, right? So let's make this a fragment and add a header here. In here we'll put a nav with an unordered list, the list item and an anchor tag, which will be a link. Go home. Okay, we click on that and then there we go. We have our link back to our home. We don't have a link in this layout, which is worth noting, right? Because this layout is provided by this layout file, which doesn't have that in there. And so this layout file only handles the about pages. Now I say about pages even though we only have one because we can nest new files in here as well or new routes. So let's make a new file. We'll say nested page.jsx and then we'll copy this. So you don't have to watch me type it again and say this is nested with the same layout and this will be about nested page. Save that. We can go to about nested now and we will see our page with that text, but also this layout kind of cascaded in. Now if we want to, we can add another layout file for this, but just so you know, that's how layouts work. Now the cool thing is that these layouts nest. So unlike head, we create this layout and it only wraps our page, right? But then we have this layout that will actually render its children, which includes our about page layout. So they kind of nest in as long as you keep providing the children to them. Now I want to show you one last thing and this is more organizational, but it's extremely cool. It gives you a way to organize your components without affecting the URL. So traditionally in these file system based routes, any file that you have is going to manipulate the URL. So if we had a bunch of routes that we wanted to wrap in something like, you know, shop or admin or marketing, if we wanted to just collect those, so we knew where all of those pages were, we couldn't do that without that inserting a shop route marketing route in the middle of it. Now we have a way that we can organize these and these are called route groups. So we're going to make a new folder and here we're going to use parens. So this will be my route group and we'll put about inside of that. Now traditionally, this would change the URL to be my route group slash about now. However, because we have these parens here, which I think is a really clever file system API by the way, because we have these parens, this is strictly an organizational folder and we can still access our pages at the routes that we had before. Pretty cool. Now there's one other cool thing about these is that they're not strictly organizational. We can actually move this layout file into these route groups and it will also apply that layout, the way cascade that layout in the way that it did before. This is really cool because now you can share a layout file with a bunch of related route groups. So all of your admin or shop pages could use the same layout without having to share it more globally or copy and paste it in between directories. All right, I want to show you one last thing. If we go into our about page here and throw a console log here, my about page, where would you expect this as a React developer? Where would you expect this to log? Well, you'd probably expect it to log in the web page console and if you guessed that, you would be wrong. It logs in our server console. Now why is that? It's because these by default are server components. If you've been following React for a while, you've been hearing about server components for a long time and we haven't really had a first class way of integrating them into a framework or we haven't seen them integrated into a framework. Now for the first time, we have server components and not only do we have them, they are the default. So how do we make them not server components? Well, we have this new directive that we can use called use client. We just put that string at the top of our files, save. And if I refresh this, now we'll get my about page inside of the client. Super, super cool. Now, this is something that you're really gonna want to read the documentation about these server and client components. It can be a little bit tricky. So like server components, you can't use use effect, use state, any of those kinds of hooks, which is really confusing at first if you've been developing React for a long time. Fortunately, you can import client components into server components and yeah, you're good to go. So that's all I wanted to show you for week one of React holiday, but if you want to get all of the emails, follow along, read about some of these things kind of more in depth or get that daily dose of these things, I can go to react.holly, where is that? React.hollyday and sign up for this newsletter or see some of the previous events that I've done as well. Some of these are even on YouTube if you like videos and stuff. So that's it for me. If you found this video useful, give it a like or a comment or subscribe if you wanna see the rest of this series. Thank you for watching. If you want to learn along with a really great community, check out the lunch dev server at discord.gg slash lunchdev. I hang out there all the time with some of my favorite web developers in the community. I hope you have an awesome day. I'll see you in the next one. Bye.