Intro to Next.js | Lesson 7: Nested Routing

Transcript

English (Auto-generated)

create, you know, a nested route. So to do that we actually, first of all, we need to be inside the pages, folder, the main folder where we we have all the routes. So in this folder I'm going to create a new folder, this folder is going to have the file which will be nested in this particular folder. The folder name can be anything for now. I'm writing it as you know the company, I can write any name, but I'm just writing company. Okay. Now, inside this folder, I'm going to create a new file and the final name is, you know, I'm writing about God, Js or let's just write something else like, you know, company J. S Okay. Just for now and then I'll be, I'll tell you why I didn't write about duchess here. Actually there was no problem. I just don't want you to confuse. I will be writing a few more things later anyway, come back to the topic. I'm writing cons space and then the company Company equals two. And then you know that what I'm doing and I'm going inside and I'm return okay? And I'm just gonna go down and then div inside the div the P. Tag or anything. I mean we can add another div tag, you know, whatever you want. That's a simple um JsX thing. Now I'm writing um Hey, this is the company page. Okay. Save it all good. I'm going to the, to the browser and I am Okay. Okay. I'm just simply, first of all this is the main page. We got it. And then when I just had a slash and I write company slash company again and I'm pressing the, you know, entry key and I'm going to get that and I got something wrong. Oh, oh my gosh. Oh my gosh, nothing bad. Everything is fine. I actually need to exploit it. Export, exporting is very important because you know that's that's what makes our new module available throughout the application. So I mean I'm exporting the company which I just created. This is a module I've created, save it going back to the browser and I'm gonna refresh that again and I'm gonna get that. Okay, here, this is a company page. You can see that the, you know, there is a nested routing now, this is very important. The nested routing is very important when you're working on the, you know, from the S E O perspective, it's very important because you know, sometimes you need extra text in the Ural. So that's that that is one of the way you can add it and then you absolutely can, you know when you're working on a big application. So absolutely, you can divide your, you can separate your application's different parts in different folders, calling them the nested directories. So that's how you do it. Okay, one more thing let's say if I simply, you know if I simply create an about Js file inside this one, what's going to happen about that is okay, I'm going to copy everything I have here. I mean in the original about that jay is great for now because we know how it works. I'm just closing it and tasting it here and I'm writing uh from the company directory. That's awesome. I just saved it. I need to go back to the browser and if I just simply write about, okay now we can have two about pages one and become one in the actually in the, in the subdirectory and one in the main directory. We can have thousands of about pages. It just, you know, it's just like in the multiple directories, each directory can have a single file with the same name. That's the simple rule, you know, so that's all fine. One more thing. What if you want, you know what if you write the company only. I mean you don't put anything but just, you know, the company, the, the main page of the company. The home page, you can say so to do that. I'm copying the about page again. The content of the about page. And I'm creating a new file inside the company and I'm writing it as index dot Js index dot Js. And I pasted it. And I'm, I'm calling it, you know, company paid or I can call it anything. I want copy paste. And here this is the company company home space home page. All awesome. All awesome. All good. Now I I need to go to the browser and here when you just write the, you know, you write the, you know, the main domain name and you got it introduction here, y'all. This is the Richard method and whatever. And then when you write, you know about, you're gonna have the the file from the mean mean directory. And when you just simply go there and you you just right, Company a subdirectory, then you get the homepage, the index page, which is inside the company uh, folder. And then you add a flash and you write another page and then you can have thousands of pages inside that and you can see that how it works. So that's the nested directory. That is very important to separate your application's pages into, you know, into different folders, different directories and absolutely, it's important from the S C. O perspective in the next cast we're going to talk something more about next day. Js until then stay tuned.
89 Views 0 Likes 0 Comments

In this cast, we will discuss Nested Routing in NextJs

Comment
Leave a comment (supports markdown format)