the individual posts. So what we did already in the previous cast is actually, you know, retrieving the list of the posts from this. You know this link by using this link. And this link is actually is an api which provides us the data to use in our um in our project. It's a it's a fake rest area you can say. Anyway, we are we are getting all the data we have here and we're getting them we're getting all the data here in the in our homepage. Okay. But now I want the the individual post. For example, if somebody wants to go to this page or somebody wants to go to this title and once somebody clicks on the individual title it should get all the data. For example the description like just like that, you know this is a title, this is a body. So somebody wants both of them. So what we should do. So let's do it first of all to do that. We need to create a new folder. Um not there, but inside the pages folder right here. I'm going to create a new folder which is posts. And inside the posts. Actually there are two ways I'm gonna go with the unique way. First way, simply create a new file and just do things like that. You know, creating the dynamic link for the dynamic route. Now here is the thing, if you don't know about the dynamic route, you need to check out another list, another series about the introduction of the next case. Anyway. Okay, come back to the topic. I'm gonna go with the unique way, which is, which is, I'm gonna create a folder instead of making a file. This is a folder. And inside this folder I'm going to create a new file which is index dot Js. Now, what's going to happen? The anybody who wants to go to this route, I mean the index dot Js. So it needs to go to the posts and then it needs to go to go to the I. D. I. D. Can be, you know, it is dynamic, it has to be. So whatever the value we put in the dynamic by the dynamic way and then we do not need to mention any path or any strength for defining the index structure. Yes. So you just need to put the posts and then you can put anything instead of the I. D. And then uh in extra Js doesn't need to be called in the Euro. It will be automatically called because it seemed X index Euro. So I think we are clear now, we need to create the actual component right here in this file. First of all, we need to create the component by, you know, by creating a, you know, a basic module we need. So the const the name of this module I'm making is a post or you can say the name of the page anyway, deposed and inside the post, I'm going to return something and what I'm exactly gonna return is um return and then inside this I'm going to create a div And inside I'm just gonna write hey it's a dynamic page. Save it. I'm going to the browser and when I just go to the browser and I write posts because the page, the folder name is post and inside this post there is another folder which has a dynamic name, a dynamic the path. So if I write you know 234 whatever I want I can write and then I do not need to put on that another slash because it is the index now. So I'm just going inside and you can see okay there is a problem and the problem is quite simple. I just, you need to export it export default post, save it, go to the browser bag and we should be, you know, we should get the data. It's a dynamic page. So whatever you write here, like you know, you write anything and then you're going to get that because the post and the folder name is, you know, it has to be a dynamic and we do not need to mention the index dot Js. That's awesome. Now now what I want is I want to, you know get the data. Actually what I'm gonna do, how I'm gonna get the data. I'm gonna hit these pacific I. D. There is a way if you want for example this one you want this data, the dollar, him, whatever it is I am Magne I use a period. I feel like I'm just you know doing some magic anyway so the idea is six so I need to write this six here The i. d. six and then I'm just going to get the you know that one with the I. D. Six. If I write I did too, I'm gonna get the you know Qui east sc East River um temporary whatever. Okay if I write the one I'm gonna get the different data so I need to hit these euros to get these posts and I'm gonna you know I'm going to do that now. Okay now the tricky part comes here actually um you know to retrieve the data or fetch the data. I can go with this method. I mean the one I did in the index dot Js I can go with that if I copy and if I simply paste it, you know if I paste it, I need to be, it has to be above the main module. It can be above or the bottom of the main module it can be sheer to, it can be here too. So I just put it above like this one I'm gonna have an error and if I go there and if I just refresh that anyway um Yeah you can see that they get study paths, the error. The what is the error? It tells the get static paths is required for dynamic ssg pages and is missing blah blah blah. So actually the thing is there are two ways to do it. Let me tell you what what what is the problem when you were going with the dynamic routes you just cannot get the data or fish the data using to get static props if you're not going why it is because you know gets treated crops actually you know gets the data on the built time. So when you're building the application or the browser is building the application. So it doesn't show the data on runtime actually but on the build time. So what is happening here because it's a dynamic round so user has the power to change the data and the value of this page. Maybe user can, you know user can ask for you know this data or maybe user can ask for a different data by changing like an underwriting foodie. The data should be changed now. So the user can ask the data the user interaction is possible. So absolutely user can change the data even after you know uh the website has been loaded in the get static props, the website has to be loaded and the the you know whatever we get we get at the time of loading, not after that. So we just can't we just need to use get static paths but we're not going to use this one. We also can use the get server side crops, everything will remain the same and it's gonna work, we could use the get static props and mitigate static props. We need, we would have to use the get um ecstatic path but we're not going that way. We're going with the get server side props, nothing more. Just simply save it, go to the browser, refresh the page and I'm gonna get the debt up again and it is working fine. Okay. So if I want to go to the different post, I need to add this slash and the number like this one. So now I'm gonna actually hit the actual, you know, actually specific post, so simply go there and for now I'm going to get nothing because I'm actually writing nothing in the screen. I'm going to do that for sure. A few tweaks are required. It has to be the post, not posts, it has to be the post again and all good now. Okay. The second thing is first I want to see what the post has, so I'm going there and I'm writing the console, the log and I'm writing post and I'm saving it and I'm going to the browser and after going to the browser, I'm gonna refresh the page and uh the post is not defined. Oh yeah, I just cannot use the post because the post has to be first, we have to import it inside this uh the action module of the page from the, you know, get service side crops. So here I'm going to write a post and now I can use the post inside this module, Go there and it's good now I can go to the inspect element and I'm going to the console and uh I'm getting some error which let's just refresh the page and okay, there is no error actually you can see that the uh you know the here it is, I wanted the 40, the value of 40. So there it is the ID 40 is here you can see that the title in whatever. So actually if I make it from 40 to 30 or whatever the data is, the data has to be changed. You can see that it is, It is 30 now and a new data entitled and body everything is working fine now um to use that data what we did here we, there is nothing very much logical, we just can delete that And go down and we can create the th one and uh oh come on like that. And I'm simply going to call the post dot title. Save it and look at the brother back. You can see that we got the title. That's awesome in the similar manner. I'm going to write the p and here, I'm just simply going to call the coast dot Body. What is the post dot Body, This is the actually if I just look at here this is the the post is an object for now and the body the title or the property. So I'm getting the properties of it the body and the title. We got the data here anyway. Okay, now there is a little problem that this is fixed. The 30 is fixed. It should be, you know, it should be a user interactive. So if I write anything here I write to I I'm gonna get the 30 I'm going to get the same data which is I D 30. I am I right anything I'm gonna get the same data because here we are putting the fixed value in the euro. So there is a solution uh in the and in here and they get service side props you know, parameters. I'm going to write context and I'm going to use the context actually by using that we're going to get the rural and everything inside of this context. So now you need to go with the context dot parameters, you know programs that I. D. So this idea is actually whatever we have at the end of the end of the path, the last value. Absolutely. The value for the dynamic route will be there. So we're calling the context dot parameters dot I. D. And then now I'm gonna hit this pacific. Um I'm gonna write this specific post and I'm going to get the data if I just refresh that I'm gonna get the, you know, I got nothing. So why it is why I got nothing. I did something wrong. Oh yeah. First of all I need to delete the 30 because that's absurd. Now it should be showing something okay if I make it, you know it's it's written automatic labor sound dolorous. Whatever. If I write, you know 37, let's say 37. Now it is provident. Well if I write just three, I'm going to get the different data. E a marvelous shares and whatever. Now actually we are getting all the posts, you know, in an individual page. That is that means we did it and it is working awesome. Now there is a teeny tiny thing which we are gonna do in the next cast which is this page should be interactive and the user should be able to choose and click on this certain post. For example this one that one and then we the users should go to the you should reach to this specific post after clicking to the post. So if you are going to discuss that in the next cast until then stay tuned