Next.js Blog | Linking the Posts

Transcript

English (Auto-generated)

think for the individual posts, I mean I want this page to be able to get us the page uh the the the page of the individual post. So to do that, I'm going to go to the uh the visual studio code. And here I'm going to create the link. Okay so to create the link I need I first need to import the link link component because you know, we just cannot use the anchor tags. So right here I'm going to import the link from the, you know, next link. So basically it's uh it's uh it's something it's a component in the next library itself. So I'm gonna go there where I just want to add the link. This this is the data which is visible in the browser right here. So I'm going to go there and I'm gonna go inside. I mean this one, I'm going to cut that and I'm gonna create the link link. And inside that I'm gonna I'm gonna just do that. I mean now I just created the link. Just consider it as an anchor tag. Okay now I'm gonna add the hyper reference and in the hyper reference basically what we want to link and how the system will identify. Mm hmm. The system it will identify using the, you know the uh the I. D. Okay. And the the I. D. Value is I mean the property name is I. D. Itself. So this is, you know, we are just getting the title for now. Data title and here it is it is not title but the I. D. So data dot I. D. Okay now it won't work because it's a pure it's a pure number. The I. D. Is a number it's not the string. It's gonna give us the error here. You can see that the field prop type the prop hyper reference expects a string or object and link but got number instead. So it should be it shouldn't be a number it should be a string but there are a few values is still missing because it is just a number but we need to mention the post's page first the posts folder actually so I'm just going inside the collaborators and before the data dot I D. I'm going to do that and I'm going to write the backslash backslash post and then slash again and save it now. Sorry posts because it is posts not a post. I mean you know just saving it going back to the browser and I do not need to refresh that. Now if I click on the you know, e more or less she has I'm going to click on this one and I'm gonna get I am not getting refresh the page. Okay now I'm going to click on it. I got it. Okay anyway I'm gonna go back and I'm gonna click on the up to you whatever it is and I'm going to get the Opto melissa ideas and whatever you can see it's so stupid. I mean you know sent sort of Mississippi. So actually the links are working, the data is actually is actually maintained. And now we're getting the posts were we've got the list of the posts and each post is visible in its own pages. So it means we actually have made progress so far in the next cast, we're gonna, you know, do some more stuff with this project until then stay tuned.
124 Views 0 Likes 0 Comments

In this Cast, we will create links to access individual posts

Comment
Leave a comment (supports markdown format)