they fetch the data from a website which provides the dummy posts. So to do this, we need to go to the next dot Js. And uh we actually can get the data anywhere we want. But we're going to get the data in the index dot Js. And then we will, you know, we will send the data from the next dot Js, throw out the website. Anyway, um to fish the data, you have to create a new component, a kind of new function actually. So, um, it's your choice. You wanna make it above the, the homer, you know? Here I'm gonna make it above now. What I'm gonna do first is we need, we need to know which kind of function we're gonna make, we're gonna make the um okay, let's just, we will export it later but we get static props okay, uh, crops, okay. We're going to use the get stated crops method to, you know, um fetch the data. There are two methods, the several props and the static crops. We're gonna use the aesthetic props because we do not want to, you know, get the interactive data, the user interaction. There is no, there is no need of user interaction. So that is totally fine. Anyway, a synchronized and uh mm hmm. This is actually, you know, the same function. And then inside that I'm gonna create another variable, actually the constant variable. And uh oh wait and I'm running the fetch, fetch method here and inside the fetch method, I'm going to simply call the https and Jason, Jason placeholder dot com. Sorry dot type e code dot com slash now, what do you want? Want to, you know, get as a dummy so you can, you know, this is adjacent place holder holder, you can get a lot of things, but we want the posts simple as that. Okay. That's awesome. So we just, you know, we're just uh we're just running these simple fetch method, which is, you know, pretty clear for any javascript person. Anyway, here we are actually, you know, and then you get the data of whatever we called above in something like, you know, posts equals two await res dot Jason. Okay, that's good. Now we need to export whatever we are going to get actually before exporting we need to put something to export. Um we need to return something. So I'm just returning return and I'm going to the collaborators and what I'm gonna return, I'm gonna return some crops. Okay? The properties and I'm going to return to the post. Okay? So what I'm gonna return, I'm gonna return the coasts I have here um and now I can export it export and space and now, okay, we are exploring this function and what we're doing here in this function, we are just going through the get steady crops and get strict props is a method, it's itself a method in the, in the next days, you know, which actually reach, which helps us getting the data, we can go with the the server side props and you know the study crops but we do not need a server side for now. Okay so here we are running the fetch command and we're fetching the data from this website what whatever this website have I think I should go to the browser to check what this website has. You can see that when I write this you can see that these are the data we're gonna get so it is just like that the user I. D. One, the I. D. The title of the body and things like that. So now we are exporting this whatever we're getting from this we're exporting in the posts and now this is the time to return whatever we've exported actually not going to the return for now but going to the console the log I am inside the component the actual module but I am not inside the return but I'm inside the component because I'm not returning this for now I'm just getting it the dead and the console log when I need to return something to the web page. I will definitely go inside the return method anyway here in the console. Okay before going to the console first we need to get the whatever whatever we've exported here we've we've actually exported the post so we need to get that here posts and hear me to call the post, I'm saving it, I need to go to the browser and I need to go there and I need to open the inspect element and I should get the data okay, it is undefined and why it is undefined. Something must went wrong and I think we needed to check what went wrong exactly because we are exporting export. Const everything, everything looks fine. Let me just double check what wrong has happened ultimately. Mm hmm hmm. This is fine. We are actually hitting the right you're in that is also fine await fetch that is totally fine. And then here the restaurant Jason the rest is actually the variable okay, this is the props I'm sending and this is, this is the data, the variable returning that is also fine. And in the article I'm getting the um deposed sexually and this is fine. It should behave like the way it should. Mhm. Something something is not right. Exactly. Let me, let me try this this way saving it computer browser back into the console and okay, I actually, I didn't get any data. We do not need to refresh ultimately. Okay. I got the data and I think high, I was getting the data when everything was fine. I think I just needed to refresh the page now. Why refreshing? I got the data that is totally fine. I was, I just needed to refresh the page Anyway, I got the data maybe you just have a question why I need to refresh the page when it is next Js then why I need to refresh the page because um this is quite funny um actually we're getting the data. This data you're fetching from the you know from there from some specific website. Okay now this is something they get steady crops which helps us getting the data for one time. Okay. So this is not the user interactively and how it works to get steady crops actually works like you know when the website loads it be it brings the data for you know once and for all and it doesn't bring the data again and again. So the website has to be reloaded to get this thing works. So I actually had to manually reloaded and now when I do not need to do this next time because you know it's reloaded by default. So whenever you know it's not reloading it's building. So the event the website is built. So when you just refresh manually by clicking there it actually rebuilds the website on the browser and then whenever you change and we will make any change it's not rebuilding but it's just you know uh you know reloading. So this is simple and we got the data we got the post. So anyway, back to the chapter, we just got the data, the posts here and it is actually working now we can get this data in the in the web page two in there too and this is what we needed to do. So let's do it um to get this data whatever the data we have here above the posts to get that data in the page we need to we just simply need to you know, go wherever we want the data. For example we want the data right here. After the P P tag, we do not need the P tag. Anyway, so after that I'm going to create a new div because I just want this new that are inside a div and then I'm gonna open the you know the javascript expression. That is the wonderful thing of the jsx study. You can run the javascript expressions here posts dot map. I'm just going to map this, you know this uh this object and then post dot map and inside the map I'm gonna run the function and then I need two things. First the data, the second the you know I d anyway I'm just gonna call the data and comma I. D. Ideas just say ideas for now. Okay and then um I'm just going there and right here okay I'm going inside and I'm just gonna create, you know, I'm just gonna return something return. And what I'm going to return right now is the data. So I'm just going to call the div again there and I am simply going to create the key. Okay and ideas, this is the key. And inside this again I'm going to call that and that are not title because why I just wrote title because you know actually it won't work but in the object we were having to data. one was the data. The second one was the um the title. The second one was the description. Actually the first one was the title anyway. Something is something is wrong here and let's just check what what what is the wrong thing. Okay this shouldn't be here now. It should be fine save and I'll go back to the browser and it let's just refresh it for now and yeah I got the data Ok, still I'm having the problem and let's just check um okay this is not That is it this one and this one should be ended Okay. I got it this it has to be this way save it go to the browser back and now you should get the data. Okay. I got all the you know, all the titles we have here and the fetching works fine. Now actually we got the data for our blog, blog. Now we need to make link whenever anyone clicks on any link. Absolutely. It should send uh the user to this specific page. I think that's for that's enough for now. We just got the data and everything is working fine regarding the fetching data in the next video. We're absolutely gonna, you know, make things work. I'm just gonna I'm just gonna tell you about what happened here. Exactly. Actually, first of all we just created the post map and then we just missed, you know, some we just, you know, misplaced the curly braces and the the, you know, the parentheses. Otherwise, otherwise everything was fine. So let's meet in the next video until then stay tuned.