Intro to Next.js | Lesson 6: Routing
Transcript
English (Auto-generated)
So in this video we're going to talk about how we can create a new road in the next years or you can say a new page in the next years. So If I go to the browser, you can see that this is the page we have for now, I mean the local host and 3000 without any any other, you know, any other extension. This is the main page and the only page we have for now. So how to create a new route. When we talk about the the react Js. So what we do in the react is we actually create uh we actually have to import a new library which is the router dot Js. And in that library we actually create the route using that library and we have to mention each route in a in a file of that library. So that library actually creates the the routes for the react application. But here in the next days we do not need to do that. And all we need is to go to the pages folder And in the pages folder we actually create a new page or a new file. Absolutely. It will be considered as a new page or a new route. You can say there are a few limitations that the api folder has to be the api folder and you you can say this is a reserved keyword in the next Js. So somehow this is why it is opinionated because this is the only way you can create the, the routing in the, in the next Js. So the pages has to be the pages. So whatever you put in the page will be considered as a page. If it's not in the A P I. If you want to create the nested routing, you have to create the necessary routing in the in a sub page. You know, you know, sub folder, we will be doing that too in the next cast maybe. But for now let's just take to the, you know, the main directories anyway to create a new page. You need to just click on the new file and there you need to put the name I'm writing about dot Js. Okay, now the file name is about dot Js. So you actually have already created the new route which is about so when somebody goes to the browser and rights, blah blah blah. I mean the two main name dot com slash about. So the one will be getting this page. So whatever you put in the page will be displayed as the about about India about route. So you know how to create a new page if you've already did it here. So we need to do something similar the concept space and I'm writing about and equal to and then like that. Okay, and then this is the way uh you know like they did and but one thing should be changed because the, you know, it's a component after all, you know, the basic rules of the javascript and they react are the basic rules should be applied so it's a component about and inside it you need to write the return this way, return and then inside it right, active and inside the debut, right? Something more like uh um whatever you want to put, I'm writing P tag and in the P tag I'm writing hey, this is the about page awesome. Okay, you did it something like that, then just go down and right export default space and write about what you've just created above. You just called it and then you need to save it and once you save it, you can go to the browser. Actually, you just have created a new route. I'm going there and I'm just duplicating it and hear about and the line break and you can see that hey, this is about page. We've actually got it. So you can see that. That's quite simple. But again, it's opinionated. So you have to be in the pages folder and there is no other way. You can just change the folder name and you can define the the folder name, like front pages to anything anywhere that's not possible. And this is the eps file which actually bootstraps the whole application so you just cannot mess with the file. Absolutely. You can change this file but this file has its own rule and then the other files you just need to define them this way I did it and uh in the A P. I. I already mentioned that this folder is not for direct pages, but it is for a p i. S. Or the back end of the application. So this is the back and folder, like you can receive response and send the request. So that is it. We will be talking about the api is later, but for now we just uh just discussed the routing. In the next cast, we will be probably talking about the nested routing until then stay tuned.