So now let's learn how routing works inside of a Next project. So let's go inside of the app folder right here and what I want you to do is create a new folder. Inside of this folder give it a name example like this. And inside of example create a new file page.tsx like this let's go ahead and let's write const page let's return a simple div which is just going to say example page. Like this.
And don't forget to do export default page at the end. Otherwise, routing is not going to work. Perfect! So let me just clear some things up. This constant page does not have to be named page.
It can be named anything you want. Just make sure that you export default the same constant. So it doesn't matter. But in the tutorial, you're probably gonna see me combine the folder name and the well the fact that it is a page so in my tutorial you're gonna see stuff like this my constants for routes are gonna be example page this is the convention that I'm going to use which if I accidentally open this file I immediately know okay this is a page, this is a route, this is not some random component. I know exactly what this component does.
So I'm just quickly explaining the structure here. Perfect! So now you might be wondering, alright, well how do I access this route? Well, let's just confirm our folder structure here. So inside of our app folder we have the example folder and then we have page.psx.
In the first part of the video, I explained that everything you saw on the main page is inside of this root page.tsx, which is just inside of the app folder. So now that we moved, I'm sorry, created a new page.tsx inside of this example folder, that means that we can visit it by going on localhost 3000 slash example. And there we go, we now have our example page right here. Perfect! And now let's go ahead and let's create another folder and let's name it users.
So let's imagine This is some kind of dashboard, right? Somewhere where we are going to display our users. And more importantly, how do we create a dynamic route? Meaning that so far you've learned how to create routes which are hard-coded, like slash example. But what if we want to route by a specific user ID?
For example, your user clicks on some other user's profile. How do we create that URL? What is the structure? Well, there is a very convenient feature inside of Next, which allows you to do just that. So inside of your users folder, create another folder and inside of it, give it a name starting inside of square brackets.
So next recognizes that this is going to be a dynamic part of the URL. It's not going to be hard coded like slash example or slash users. It's going to be dynamic, right? And inside give it the name of the variable that you expect. The name doesn't actually matter but you are gonna have to be aware of what is the name because that's how you're gonna access it inside of your code.
So let's clear this up let's see exactly how to do that. Inside of users, I'm going to write square brackets id like this. And then I'm going to create a new file page.tsx and let's go ahead and write const id page. You already know that is my convention and I'm going to write a div id page and don't forget to of course do the export default at the end of id page. Perfect, So let's check what that route is going to be.
So that's going to be slash users and then slash whatever we want, right? Because IDs can be a lot of things. So let's try that out. Inside of my localhost, I'm going to write slash users and then I'm going to write slash 123. And look at this, it's working even though we have not defined this 123 anywhere inside of our code.
So that's what this convention of using square brackets in our folder name allows us to do. So now what's important for you to understand is how to fetch this ID inside of this page.tsx because that can be very useful, right? You're probably gonna want to then go to the database and request the user with that ID which we have in our URL. What's important for you to understand is that by default Every page inside of the app folder is a server component, meaning that from here you have some special conventions and well, probably some different stuff that you're not used to if you're coming from the single page application react world but don't worry I'm going to try my best to explain that here. So how do we access that id?
First thing we have to do is confirm what is the name of the variable. In this case it is ID. We know that by looking at this folder. And then go inside of page.vsx right here and go inside of the props here. And let's go ahead and extract the params.
Sorry, just the params like this. And let's give it a type. So let's give a type to this props to be params, which is an object, which is going to hold an ID, which is a string like this, like that. And now let's change this to be id params.id and there we go now we have a text which says id 123 and if I change my URL to 456 for example the id changes as well So if you're wondering where did this params come from right we usually if you're working in a single-page application you're used to passing props to your components. Well we are gonna do a lot of that in this tutorial as well but server components have some special options like accessing the params and in the future is also going to be search params you're going to see all of that here but I just think this is an important concept for you to understand.
Perfect! Now that we have this I want to cover another type of folders here. So you've just learned that pretty much every folder that you create inside of Next 13 app, sorry, Next 14 app folder is going to become a route. But what if you just want to create a folder, an organizational folder for example, which is excluded from the URL. Well you can do that.
Let's go ahead and let's create a new folder and let's write normal brackets and let's write for example, I don't know, let's write test like this and go ahead and try a new file page.tsx inside of that. So I'm gonna go ahead and write const test page, I'm gonna go ahead and I'm going to return a div which says test page and I'm gonna make sure that I do export default test page so usually we should be able to access slash test right let's see if that is true so if I go to slash test I have a 404 if I try and put parentheses which is not possible in the URL you can see that they still get a 404. So this folder is completely excluded from the URL and this is gonna be very useful for us. But it's not that these folders should only be used for excluding things out of the routing system when creating folders. They are also very useful for when you want to create reusable layouts for many different routes.
For example, let's go ahead and create a new folder inside of here which is going to be called, I don't know, let's say something, like that. And let's go ahead and create a new file inside page.dsx like this. And let's do const something page and let's return a div something page and x for default something page We can now access this route but what is the URL? Well very simply it is just a slash something like this. Now we have the something page.
As you can see our URL does not have the test folder inside of it so that's very useful for us also let's remove this page.tsx which we have inside of the test folder like this let's just remove it perfect so make sure you just have the parentheses test folder and then something inside and now let's go ahead and create another folder called other like this it doesn't really matter we're just playing around now and create a new file page.psx inside and let's do const other page return a div other page and let's export default other page like this. So now if you go to slash other, there we go we have the other page, perfect. But why am I doing this inside of this test folder? Well of course I wanted to demonstrate how you can organize things, right? Because sometimes if you have a lot of routes, it's very useful to organize it inside of a folder, but you don't want that to become part of the routing system, right?
Well, let me show you one cool thing that you can also do inside. There is a reserved file inside of the next framework just like page.tsx but it is called layout.tsx and let's go ahead and create that file inside of this test folder. So create a new file layout.tsx like this and as you can see we have an error here which says that the default export is not a react component don't get scared by this error that is because just like page.tsx layout.tsx requires a default export but we have not written anything yet. So let's do that now. I'm gonna write const testLayout.
So why am I calling it test layout? Well, because it's inside of the test folder, right? So I'm using the same convention as with pages. And let's go ahead and let's return a div inside like this. And let's write layout.
And make sure you do export default test layout. Perfect. And what happened now? As you can see in my URL I am still on slash other but the only thing that's rendering is this layout text which we've written here and the same thing happens if I try to go to the something folder or a route which we created here right so I'm gonna change this to slash something and again it only says a layout Well that's because we have not finished configuring our layout.vsx. Go back inside and from the props in every layout file you create you can always destructure children.
So let's go ahead and destructure the children and let's immediately give it a type children is a type of react.react node also in next you don't have to import react right except if you are importing use effect use state use memo and stuff like that or some very specific types. But for stuff like this you don't have to import React. It's globally available here. You can see the namespace. Perfect.
And instead of writing layout, we're going to render children like this and let's take a look at the browser now I'm on slash something and it's rendering something page I go to slash other and it's rendering the other page correctly. Great! So what exactly did we achieve by creating this layout file? Well, let me show you. You can now go ahead and give this div a class name of bg-rows-500 for example.
And as you can see, the other page now became red. If I go to slash something that page is red as well. But if I go ahead and try one of these routes like example or users let's see what happens with them. So if we go to slash example, this one is not red. So that's what layouts are so useful for because they can create well layouts for specific routes And when combined with this organizational folders, which initially we just thought are being used for, you know, ignoring the app router are actually much more useful than it seems.
And this is going to come very handy because in our project, we're going to have a landing or a marketing page where we want to use one specific layout with a specific navbar with the footer where we're gonna have the privacy policy and everything and then when we get to the actual application we're gonna want to have a dashboard layout with a sidebar with a different night bar so that's why these organizational routes are so important to understand because we're going to be working a lot with those routes and in here in these folders like other and something, you can continue doing this like we did with users, like dynamic IDs and more. Perfect. So just one thing that I've noticed right now, which we have to fix before we move on to other stuff is that I want to give this div so I'm inside of layout.tsx inside of the test folder and I want to give it a height of full but when I do that nothing really changes right it's still not obviously this has a name of h-full which means a hundred percent height. But for some reason it's not doing that.
So let's fix that by visiting our globals.css file. So go inside of the app folder, globals.css and just below this Tailwind directives, also don't worry about this warnings, so they are not errors, they are warnings because this rule at Tailwind is simply not recognized in my editor, there are ways to fix that but they're not going to be a problem throughout this tutorial. Don't worry. So go ahead and add the following html, body, colon, root and just add height 100% like this and once you save that file you can see how now our layout.tsx hFull and bg-rows 500 has taken on a completely different effect. Perfect!
And here's maybe a more realistic example of what we would do here. So I'm going to remove this right and instead I'm going to write a div here. This is a navbar like this and there we go this is what these routes are so useful for. I'm just going to add a little HR element here so it separates these two. There we go.
As you can see this is how we are going to use organizational routes. Inside of our layout file this is where we're going to put our navbar. If we have a sidebar that's exactly where we're going to put our sidebar, right? And then we're gonna have some other routes like example which are not gonna have that because we don't need that. So this way we're gonna be able to separate, organize and reuse our layout components in a nice way and all of that inside of this big folder structure here.
So that's what I wanted you to understand in this part of the tutorial. Some basics of routing. Of course if this still seems complicated or unclear, don't worry because we just did this but we're gonna delete all of these files and we are slowly gonna repeat exactly what I just did but with a real world example because we're gonna be building a real world project. So it's I hope gonna be more clear than if it's not already. And you can of course always visit the official Next14 documentation, just make sure that you are reading the app router version and there they're going to even further explain how all of these things work.
Perfect. So now we can actually go ahead and remove the test folder example and the users folder. Just move them all to trash. We are not going to need them and you can go back to localhost 3000 where we have hello Trello in a nice blue color and one more type of route that I want to show you is the API route. So in the older versions of Max.js when there was a pages router, we had to write an API folder.
Nowadays we don't have to do that. In my tutorial I'm still going to use the API folder just because I think it's a nice structure to hold my API routes inside of the API folder rather than them being cluttered with my other client routes. But just for this very simple example let's not do all of that let's just simply create a new folder and let's also call it users for example and inside of this file let's go ahead and let's create a route.ts so this is the same type of convention as with page.tsx or layout.tsx but since this is an API route no need for the tsx it's just ts right so let's save this right here and now let's write a very simple route handler inside so I'm going to write export asynchronous sorry it can be just export function get like this and let's go ahead and let's just write return next response and make sure you import next response from next slash server dot JSON and I'm gonna write hello Trello like this a very simple object let me just remove this pop-up so that you can see there we go like this perfect And if I try and go inside of my browser to slash users now, you can see that I have a little extension which prettifies my JSON output, but you should see the same thing basically an object maybe not with this pretty colors right again this is an extension I'm not sure what's the name so that's how we create API routes inside of Next.js framework I just wanted to show you that one last thing and this is called a route handler.
So inside of this single route.ts file you're going to be able to create functions like post, functions like patch, right? So that's why we don't do default exports in this one because they can have a lot of them in one. If you try and write export default it's not going to work as you can see the page isn't working but when I remove it's working. Perfect! So now we know how to create API routes, how to create organizational routes, how to create layouts, how to create dynamic ID routes, how to access those in server components and I think we have warmed up enough for us to start implementing our authentication.
Great, great job! Just make sure you delete those files and folders we created so you