So now I want to go over and explain how routing works inside of Next.js, more specifically the app router. If you already know this you can speed up this chapter or skip it completely. So how did I know that in order to modify this screen and add a button I need to go inside of page.dsx that is because I know that Next.js uses folder-based routing and has the following file convention names for specific layouts, pages, errors and stuff like that. So I knew that if I want to find the root page of my application, which is just localhost 3000, which is technically localhost 3000 slash, right? I know that that file, that route segment is represented in the first page file that I can find in the app folder.
So that's how I know that this is the file I have to modify to modify this screen. And if you're wondering where did I find that out, well it's in the Next.js documentation. And if you plan on exploring this documentation yourself, just make sure that here in the sidebar you select the app router, because if you select the pages router, you're going to be viewing at the old documentation. So in here you can see a list of some other file conventions like the layout file which we also have here but this is the one that I was talking about. Page is a file which makes unique UI of a route and makes routes publicly accessible.
So let's go ahead and scroll a bit up because in here we can see that even better. So you can see that we have this app folder which by itself represents the root page. So inside of the app folder this page represents the root page. That's how I know where to find that and if I go ahead and create a new folder and name it absolutely anything inside of the app folder and then put another file inside of it called page.tsx then that's going to be rendered as dashboard and same is true for as deep as I want to go. So let's go ahead and take this concept and actually create that.
So I'm gonna go ahead and I'm gonna create a new folder inside of my app folder here called dashboard. And just by now if you try and go to slash dashboard on your localhost you're gonna get a 404. So why is that? Well, remember, we need to do some file conventions here. In order to turn this folder into a route we need to give it page.dsx like this.
Page.dsx And here's an important thing about page.tsx So the only thing that matters is that the file name is page and it doesn't matter if it is .jsx or .tsx, right? It's just it matters that it is page. And the other thing that matters is that you do a default export. For example, I'm going to call this a dashboard page. Like this.
So just make sure that you don't accidentally do this. Export const without the default. So if you do this it's not going to work but if you keep the default export that's going to work. Let's go ahead and return dashboard page like this. So if I go ahead to localhost 3000 slash dashboard now, there we go.
I am on the dashboard page. Great. And now let's just confirm that I can create some even more nested routes. So inside of this dashboard folder, I will create a new one called settings. And inside of it, a new page.tsx.
And let's go ahead and do the same thing settings page and let's return a div settings page like this so now I'm going to go to localhost 3000 slash dashboard slash settings and there we go I am on the settings page great so what did we learn well we learned that in order to turn a folder which is the default routing mechanism of nextjs into an actual route segment we need to use a file convention called page and inside of that page it doesn't matter what our component is named it can be named anything like this all that matters is that we do a default export and if I refresh there we go everything is still working so remember there is a file convention called page, which needs to be inside of a folder, which you wanna turn into a route segment. But there are some other things you might be interested in. For example, what is the layout file? Let's go ahead and see what the official definition says. So in here we have a layout file convention which is a shared UI for a segment and its children and you can see more about that right here.
You can see how it works on this very example that we have here. So we have the dashboard folder right and if we create a layout file then that code inside is going to be shared both in the dashboard route segment but also in the settings route segment. So layouts are very useful if for example, if I go on localhost 3000, let's imagine that this is our home page, right? And then on the slash dashboard, I want to go ahead and add a little navbar. So the perfect place to do that is, well, the layout file.
Because then it's going to be shared across the settings page as well. Because right now you can see that if I go to slash dashboard slash settings, there isn't much difference between them, right? You don't even notice that this is a child of dashboard. Sometimes this is exactly what you want but most of the time you're gonna want to give your users some kind of indication that you are in the dashboard route segment and layouts are perfect for that. So inside of the dashboard folder here, I'm going to go ahead and create a new file layout.vsx.
And let's go ahead and learn some things about layout. So you will immediately get an error like this because we are missing a default export here. So let's go ahead and call this a dashboard layout. And let's return a div and just write layout inside. And what happened now?
As you can see we are no longer rendering the contents of our page.vsx and I am on localhost 3000 slash dashboard. If I go to slash dashboard slash settings Same thing happens. The route is obviously working, but nothing is rendering here That is because whenever you are working with a layout file, you have to remember that this is a file convention, right? So this is a reserved file. Next.js is gonna render this in a very specific way.
So here's what you have to do every time you use a layout file. You have to extract the children. So I'm gonna go ahead and just quickly extract the children here and just for now I'm gonna give them a type of any, right? It doesn't matter usually they are a type of well I am going to write it now they're a type of react.react node like this and then what we do is we just render the children like this And what happens now if you take a look there we go we can now see our slash dashboard slash settings normally and if I go back we can see our dashboard page. So what did we achieve by creating this layout file?
Why is this even needed? Well let me show you. Let's go ahead and modify this a bit. So I'm going to go ahead and give this a class name of let's give this a flex, flex-call and gap-y4. And then in here I'm going to create a little navbar component like this and I'm gonna write this is a shared navbar for dashboard segment maybe a bit long and let's go ahead and give this a background color of black and text of white.
Like this. And let's take a look at it now. So we can now see that we have this mock navbar at the top which is clearly in the dashboard page but what happens if we go to slash settings? It is also here. So every single route that we create inside of the dashboard folder is now gonna have this little navbar.
So let's try that out. So inside of the dashboard folder I'm gonna create a new one called users for example and inside a new page.vsx let's go ahead and render a user's page, return a div, user's page like that. So where is this going to be located? At localhost 3000 slash Dashboard slash Users and the users and the settings and the dashboard which is inside of this page.vsx Are all going to share this layout file right here So let's go ahead and take a look at that. So if I go to slash dashboard slash users, there we go.
The same thing. This is a shared nav bar for the dashboard segment. Perfect. So I hope that kind of cleared up what a layout is useful for. It is especially useful when you want to do something like, for example, this is something we're gonna have.
We're gonna have a folder called Auth, right? And inside of here we're gonna have something like a folder called Login. And then we're gonna have a new file page.vsx. And then we're gonna have a simple login page with a default export and this is gonna say login page. Right?
And now what's cool about this layout files is that if I go to localhost 3000 slash out slash login you can see how this one doesn't have that layout, right? Because that layout that I want is specifically for once the user logs in, right? When they have the entire sidebar and the navbar so that's why those layout files are very useful. And I hope that kind of cleared it up and here's the thing if you try and look inside of your app folder you will notice that you also have a root layout here alongside our page.csx here. So this is a very important file that gives us crucial structure to our project like HTML and body.
So you must not remove these files. This one is very important. But other layout files which you manually create like this one in the dashboard you can always remove them. So if I just go ahead and remove this the page is not going to break but now all of those all of these files here will lose their shared navbar right so that's what layout files do and let's just quickly go ahead and just take a look at all the other file conventions that we have here So we just explained what the layout is, we explained what the page is. Besides that you have the loading.
Loading will be triggered as a suspense around your page if you directly await something inside of page.vsx. So if I went and did something like inside of the dashboard page.tsx here, this is a server component by default. So if I go ahead and give this an asynchronous thing and do something like const await, sorry, const users await get users from wherever. Whoops. So just a mock function.
This doesn't exist, of course. Then if I had another file inside of dashboard called loading, then that file will be shown to the user until this is loaded. Right, so that's what that loading file is used for. But I do that in my other tutorials if you're more interested in that. In this one, I'm just going to focus on the out, but I still want to give you a little bit of, well, introduction to Next.js.
And we have a custom not found so that is if you're going to be Next.js does have a default not found but you can limit the not found to a specific route segment as you can clearly see here So you can limit your own not found and customize the not found page using this file convention. Error is for catching errors and you can go ahead and explore on your own what the other file conventions do. Great and I just want to go ahead and do a just a few more you know tips and tricks that might you might find helpful here. So we just learned how we can share a layout using a folder like a dashboard but here's the problem right what if for example you want let's go ahead and remove the dashboard folder we can do that let's just focus on the out folder so make sure you have an out folder login and page.tsx inside so here's the thing So I want to go ahead and create inside of this out folder a layout.psx like this and I'm going to go ahead and do a default export of ALF layout. I'm going to go ahead and get the children.
We already know what their type is but this is just for demonstration And I'm going to render the children inside like this. And then I'm going to go ahead and add a little navbar here. And I'm going to write this is alph navbar. Let's go ahead and give this a BG red and text white. And let's give it a BG red of 500 more specifically.
Like this. Great. So now if I go ahead and, I don't know, copy this login and rename this to register, right? Go inside of the register page, rename this to register page and let's render register page. We already know what's gonna happen.
Both login and register pages are now going to share this out navbar. So if I go to slash out slash register we know that these two are sharing the navbar. But here's a little problem right you might have already noticed if you're kind of experienced in in routing right. It seems like the only way we can create a shared layout is by creating a folder like auth which simply has to be a part of our URL. Right?
What if I just want to go to slash login or just slash register without the slash auth first? Is it possible to do a shared layout? Well actually it is and there is a specific way you can do that. So here's what I recommend you do. Remove absolutely everything regarding this out folder.
So just the out folder not everything and you should be getting a 404 and you can just go ahead and return to localhost 3000 like this and here's what I'm gonna do so I'm gonna go ahead and create a new folder but this time I'm gonna wrap it in parentheses and I'm gonna call it out again and then inside I'm gonna create another folder called login and another page and very simply I'm gonna do the same thing login page div login page without out prefix like this So can you guess what this does? Well I think you can guess because of this text which we wrote. How do we access this page now? Well I'm gonna give you a tip. We are not writing out anymore.
So this wrapping in parentheses is a folder convention in Next.js which tells the router that this is a specific segment, right, so this can hold its own layout just like our previous out folder could But one cool thing is that this will not be visible in the URL segment. So if you go ahead and go to localhost 3000 slash login directly, there we go. So this helps us both organize our routes better, especially if we're gonna have a lot of out routes like a login, register, forgot password, this, that, right? So because of that this kind of route groups are especially useful. And here's another cool thing of course if you create a layout.tsx file it will still work.
So I'm going to go ahead and create out layout here. I'm going to go ahead and extract the children and I'm going to simply write a div here, a navbar. This is navbar without out prefix. Let's give it a class name, BGRed500 and a text of white and let's render the children below and there we go. So you can see how we are still sharing the layout But look at our URL.
It is just localhost 3000 slash login. So I just wanted to clear that up. There's a lot of possibilities that you can do inside of the app router, right? You can read the documentation and find so much more things that you can actually do. But I'm explaining some concepts that I will be doing in this tutorial so I just want to make sure that you're not getting confused when it comes to doing that.
Great and there's just a couple of more things I want to show you. So I wanted to show you this. So if you go ahead and create a folder inside of the app and let's call it components for example and inside if you have a file called page.tsx and if you accidentally do a default export like components page and a div components page you already know that this is gonna become a route right but look at how this looks we technically don't want this to be a route right This looks like it should be an inner components folder but if I go to my localhost 3000 slash components look at this it renders the components page that is definitely not something we want, right? Because if you write it like this you're probably bringing in you know some habits from single-page applications because you used to write it like this. So here's a little tip that you can do which is similar like this route groups but what's different is that it completely it tells the It tells the router to completely forget about this.
To never put this in the router. You can do that as well by adding an underscore. Like this. And you might get this weird one unsaved file inside of your .next types if that happens for you just click on it, save it and close it. That's it and let's go ahead and check it out now.
Look at this now localhost 3000 is a 404 page. That's perfect. So that's how you can omit the folder from the router if you for any reason inside of the app folder want to have a file called page But don't want it to be a part of the routing system You can do that as well and you're gonna see me use this convention underscore components whenever I'm creating some components which will only be used once so not reusable. I'm gonna keep my reusable components here where the chat-cn component buttons are. Great!
So if you're having any trouble with this .next folder which you know might happen here's another little tip that you can do. So inside of your terminal just shut down the app go ahead and remove the .next folder and just do npm run dev again. There we go. You don't have to worry about the next folder because that is just cache and it will regenerate every time you do npm run dev. Great, so I hope you kind of understand how routing works and some tips and tricks here.
And I just want to go ahead and show you the difference between a client and a server component to wrap this up. So we can remove the underscore components folder and we can remove the out folder. So just like we started a globalist file, a layout file and a page file. So right now if you create any file, be that an error or page or layout or components inside of the app folder by default that's going to be a server component. What that means is that if you go ahead and do a console.log here and I'm gonna say where am I logged?
Like that. You might be expecting to see that log inside of your inspect element But no matter how many times I refresh it's never logged here. Instead you can find it inside of your terminal. That's because by default this is a server component. There we go.
Where am I logged? So if you want to turn it into a client component what we have to do is mark it as use client at the top like that. Let's check it out now. So now if I go inside of my inspect element there we go we successfully converted it to a client component. So when is one going to be more useful than the other?
So client components are your normal React components. So inside of these components you can add a use effect for example. So I'm gonna add a little use effect here with an empty dependency array and I'm gonna console.log mounted like this and if I go ahead and log this there we go it says mounted right here. But what happens if I remove the use client which will turn it back into a server component You will see that I'm going to get an error and it's very clear what it says You're importing a component that needs use effect and that only works in client components but none of its parents are marked by use clients so they are server components by default and you can of course click here on this link to learn even more about that. So you just figured out that client components are useful for interactivity, right?
For use effects, on clicks, all of those things. But server components cannot do that kind of stuff. What they are good at is being asynchronous. So you can turn any server component into an asynchronous function and then what you can do when we connect with the database you can do something like const users to be await and then imagine we have a database dot well something like this right you can actually call the database inside of the server component and then you would probably like return it to a client component like this data user something like that and then client component would be all nice and interactive so you can imagine server components like an API route like a get route something like that great I hope that kind of cleared it up. So just go ahead and turn this back into a server component.
So this is the only thing you should have inside. In my app folder I reverted everything to the original so I only have page.csx right here. Great! So you figured out how routing works inside of Next.js. If this is your first time doing this I would suggest you kind of practice on your own a little bit before continuing forward.
Confirm that you know how this works and what we're gonna do in the next module is we're gonna go ahead and connect to our database and create our Prisma schema and then we're going to start incorporating NextOut version 5. Great, great job! Good job!