we're gonna talk about the dynamic routes. So what are the dynamic routes? Okay, so you know how to create a page? How to create a route. How to create the nested routes in the next Js, you know all these things. I mean you now can absolutely create new euros in the, in the, in the next days, for example, you can now create a page like that. That's awesome. That's totally fine. And that's good. But what if you're creating a blog, you just cannot write the name of the blog files. You know, that has to be dynamic. So we just cannot write the titles of each blog as as a separate file. Because you used to save the data of the blog in the database. So you need the data from the database and absolutely you need to, you know, you need to create something like post dot Js or similar. And then in that page you actually get the data from the ural from the database. So well how you do it in the next years, there is a very cool method to do such things. I'm going to create a new folder for this purpose and the folder has to be outside the company folder. I'm going to the pages folder and here I'm I'm creating a new folder, for example, blog. Okay, now in the blog I need to create a new file. But the file name is is a tricky thing. Actually not tricky, but something actually new you've ever seen. I do believe the final name should be, you know, square brackets. And inside the, oh my gosh name come on green. Let me rename it man. Okay square brackets and inside the square brackets. Uh It can be anything I'm writing I. D. I can write Tyler or anything. So dot Js the file name is square brackets I. D. Dot Js. The idea can be anything again it can be titled, it can be I. D. It can be cut, it can be pendant, can be penciled, anything you want to write as the name of this file. You can but this name, you know you will be calling the name to get the data to get the the ural. I'll be discussing what I'm telling later. Anyway you've created the file, the file method would be similar as you've created the old files like this one. So I'm gonna write it cons and the final name it can be like you know, blog um blog post and then it's equal sign and then this and then that and then I'm just gonna go inside and return something which is div and inside the day I'm gonna write P. And in the p. I actually the P is not necessary. You know you can write anything a complete page, you can design a complete phds. So I'm writing here something like you know in the p. I can write, you know this is a blog post. That's awesome. That's actually what I wanted Now if I go to the browser and if I just you know this is the about page. But if I just simply write blog first I'm gonna have the error. I press the line you know line break, enter. I'm gonna have the error because there is no index page in the blog, the blog directory. I'm going back there and I'm writing something like you know what if we finish or whatever if I press the enter key again I'm gonna have Okay okay man uh this has to be exported default and blog post. That's awesome. Save it go to the browser back and refresh it again and you're going to have this is a blog post I've guarded. That's that's actually perfect and that's what I was looking for. Okay the blog post is there and it's up and running and it's working. The second thing we need is um we need to test it how it works exactly. Let's say I write something like one. I got it. This is a blog post I write to I got it. This is a blog post. I mean I write whatever I want and I'm gonna have I'm gonna end up to this page to this. I mean you know the the square bracket I. D. Dot Js file to this file actually this is not the name of the page anyway so and we the the system going to print this data whatever we have in this page in this file actually so that's totally awesome. So now the system knows in the blog, whatever you write will be landed to this page. But what if I create another thing I write you know the new file and I'm writing dummy dot Js enter and after that you know in the dummy dot Js. Actually I need the same code. Just a simple page I'm creating. So I'm making it dummy and the dummy and this is the dummy page dummy, just dummy, that's fine copy paste, save it, go to the browser now, whatever you right here. But when you write the dummy you know what's gonna happen? The dummy pages there. This is this is a dummy but instead of dummy you write only deed you're gonna land it to the blog post page. You've created the dynamic link or dynamic route. Actually I think this is clear now that you can create the pages, different pages but if any page you can call you know any route here. But if the route has a page which is inside the blog folder then absolutely this will be called, I mean if this is available, I mean if somebody called the dummy, if somebody called what if here and what if pages available created here. So absolutely that page will be open. Not the I. D. One. I think that's I I made my point clear very well now for example you want to see what actually for now whatever you write for example you write D. Or you write, you know, a detailed uh you know, something like that. But it's simply gonna I'm simply gonna show you whatever is in the page. So that doesn't make it dynamic, it is still the static page because whatever the data this page has, we can see in the browser. So to make it the dynamic one, we need to get the link the Ural or the Ural string we have here, we need to get it in the page and then we need to process it and we need to call the data from the database using that ural string. So I'm not gonna put the database here, but I'm gonna tell you how we can get the data from, I mean how we can get the Ural string from the Ural. Let's do it. So I'm gonna import something and I'm, what I'm gonna import is the the use Router. So use router Route. Ok, that's fine. I've got it by using this module which is already, you know, available in the next next library. We are just going to go down and uh inside this main module actually we need to import whatever we want outside the main module, this is the main module. But whatever the process we wanna do, we can do it inside the, you know, the the main module of the page. So here now there is one more thing, we have to be be above the return, not inside the return because when you're going to write the pure javascript, you should write, you actually have to write it above the return and then you can return that the javascript inside the return. But to call it you have to be above the return. That's a simple one, simple thing. I think I made my point clear now the constant, I'm gonna write something like you know um for now I'm just writing router and equal to, I'm just crowder, I'm just saving the whole router for now. Okay and uh oh sorry first I need to use it like that and then actually this is the louder variable and then I'm gonna go down and I'm gonna called the console dot log and I'm gonna simply um copy the router and paste it inside here and I'm going to go to the browser now and save it, everything is fine and I need to go to the inspect element because I used something which is in the console, refresh it again. Okay, it is loaded two times we got the object two times the other one is the empty one because when we originally loaded we get nothing but we when will it automatically loads again and it fills with the data so the first one is not necessary and not important, I'm going there and here you can see that there are too mean three mean properties of this object which is the used router, this is a this is this is the object which is now assigned to this router and we are taking it in the browser. Okay now the as path the as path is actually have the whole urinal string. As a path not the specific one. I mean this is the idea actually. This is the idea of the page but we got this blog slash whatever whatever we want. And then the the the query in the query we have another object which is the I. D. What if we finish learning next year? So this is the idea specifically but this is not the idea but this is the whole path. So the idea is actually what what why I'm calling it. I did. It can be anything if I write here instead of I. D. If I write you know cup pen paper whatever. So the I. D. Would be cut pen paper or whatever I write it is ideal for now because I wrote I call it I named it I. D. I think that is clear. I know this lecture can be a little tricky. So you should watch it again if you get confused at any point because uh there are many things anyway. Okay so we got the idea, we got the S. Path. We need the I. D. I. D. Specifically. So absolutely we need this property now. You already should know how you can call the specific property from the from an object. So how you do it by putting the period and the name of the property. So the name of the property is query. I'm gonna get the query and I refresh it and I'm gonna get the inquiry only which is which has another property which is the I. D. And whatever the idea it is. Now I want another data. I'm going to extract the I. D. From this router. So I do not need this anymore. And I'm actually writing another variable. And I'm actually extracting something from the from this router dot query. This is an object ultimately. And this object has a property which is I. D. So I'm gonna extract the I. D. And this idea is I'm gonna use inside the return like that I be and then save it. I'm going to the browser bag and you can see that we've got it we've got it now whatever you right you got it in the into that page. So I think I think this is awesome and I think we did it now the did it. Okay I got it here. Okay that's perfect. Now actually we do not need to print this idea here but when we got it here in the javascript section then we can you know we can manipulate that and we can send it to somewhere and get the data back. So we absolutely can send this to the to the api we didn't create any api yet But the back end logic, you know the back end logic. So you can send the data, uh the I. D. To the back end. And in the back end you actually call the Mongo DB or SQL or M by SQL whatever you use as the database. And then you get some data back and you show it here instead of this is static page. So this is how the dynamic routing works in next Js. Okay guys in the next video, I'm going to talk something more till then stay tuned.