All language subtitles for 009 Rendering Dummy Post Data_Downloadly.ir_en

So let's now start wiring up

our PostItem

to the PostsGrid, and let's add some dummy data.

To wire it up, keep in mind that in the PostsGrid

we get posts through props,

and that will probably be an array full of objects

that describe a post.

So assumption is that a individual post and that list

has all the data PostItem needs.

We can make that assumption

because we are writing that code.

So we'll just have to make sure

that this the case later.

Now, PostItem, this component, once a PostProp,

hence now in PostsGrid,

we can add that PostProp here,

and pass the post which we get here, in this map method

into PostItem through that PostProp.

Now we expose that data to PostsItem.

Now, since we map, we should also add to key prop

that's required by reactjs

to efficiently render an update that list,

and we can set this to some unique identifier,

and every post will have a slug property

which is the unique identifier of a given post,

and therefore that is what we can use here.

Now we got that, now we need some dummy data.

For this, let's first of all, go to Featured Posts

in the homepage folder,

because that is where we now wanna use that PostsGrid.

So in here we want to output PostsGrid,

and for this you should make sure

that you add the import two PostsGrid to that component.

And now the there we need to set the PostProp

on PostsGrid.

We need to set that because in the PostsGrid component,

we are extracting that PostProp here.

So we wanna se this, and in Featured Posts,

I actually also expect that I get my posts data from props.

Now that's a long chain of props, and we could,

therefore of course also kind of consider

using context or redux

to avoid this prop-drilling,

but here I'm actually fine with it

because it is a chain that makes a lot of sense,

and a PostsGrid for example,

shouldn't be tied to one specific context anyways,

because we will reuse that component in different places,

so that should definitely receive its data

through props instead of context,

and hence I'll leave it like this.

Therefore, in Featured Post,

I'll sets the PostProp on PostsGrid

to prop dot posts.

And yeah, that's a lot of posts,

but that is what this application is about in the end.

So now Featured Posts also has a PostProp

that needs to be populated.

And let's therefore now finally go to the place

where the prop chain will end, and that is index.js file

in the pages folder.

Here below Hero, I wanna output my Featured Posts,

and therefore you need to make sure

that you do add that import

to import the Featured Posts component.

And here we now set our PostProp.

Now later,

we will get posts with get static props,

when we have actual post which we load.

For them moment we don't have that,

for the moment to just see something,

I'll add

DUMMY

POSTS array here,

which I'll set as a value for the PostProp,

and we'll then replace that later.

Now, DUMMY POSTS will be an array

full of DUMMY POSTS data, so full of DUMMY POSTS objects.

And now every post object here,

showed in the end half these properties

because that's what we rely on later.

We wanna have a title image, excerpt, date and slug,

hence here in index JS we wanna add to that.

We wanna add a slug, title, an image, an expert,

and our date.

So all those properties

we are relying on

here in PostItem,

five prop there, five properties here.

Now, since it's dummy data,

we can come up with any slug and any values

in general we want.

The slug should be a text with the words

separated by dashes and no special characters.

So here I'll have like a slug of

getting-started

with nextjs,

and then I'll add a title off,

Getting Started

with NextJS,

so that could be a block post title,

then a image,

which I'll name,

getting-started-nextjs, just like this,

and then(indistinct) the dot png.

I will soon provide this file to you,

so it would be half this image.

Then add an excerpt, where I say something like,

NextJS is

the React framework for production,

it makes building fullstack React apps and sites

a

breeze

and ships with built-in

server-side rendering.

Now you can come up with any texts you want,

it just shouldn't be too long

because it's just a short review text in the end.

And then I'll add a date,

which should be in the format of

year dash,

month dash day.

That will be a date which then later can be parsed and used

by the date constructor.

So that's some dummy data,

and I'll add more than one posts here.

I'll repeat this four times,

and I'll just add it to the slug slightly,

so getting started with nextjs2, and three, and four,

so that this is unique,

and all the other data is duplicated for the moment

just because I don't wanna waste time

setting up dummy data here,

we'll just need this to see of our grid works correctly.

So that is what it is,

that is the DUMMY POSTS I wanna work with,

and that's the DUMMY POSTS parsed to Featured Posts.

Now, in order to see anything on the screen

we now need that image, which we are relying on.

And I do provide a dummy image for you,

you can use that image, which you find attached,

the getting-started nextjs png file.

You can download that

and add it in your public images posts folder,

there at this getting-started nextjs png file,

which has a little dummy file I created for you,

of course, you can also add your own files.

And now double check that the value

you set up for the image property here

in the DUMMY POSTS data,

is equal to that image file name you just added,

that you have no typo here.

With that, we should have everything we need.

If we now save that I get an error,

if I reload,

because a forgot to set the href property, makes sense.

In a PostItem, I'm wrapping the entire post

in the end with a link, but I'm not linking anywhere.

I forgot to set my href.

And of course we wanna set the href here.

Now, what should be the link,

or the path this link leads to though?

It showed in the end

be the individual page board this selected post.

So we wanna load this slug page here at the end

for that concrete post slug.

Hence here, we wanna derive that path dynamically,

and I'll do that by adding a separate constant,

linkPath,

which again is a template literal

where we start with, slash posts

because that slug file is in the posts folder,

in the pages folder,

and then slash,

and then some dynamic value.

Here we wanna use the slug then

because that's luck, that unique,

human and search engine friendly text

that should be part of the URL.

And then it's this linkPath which we use here.

So that is something we have to add.

And once we do add this, we do render Featured Posts.

Now the cards are showing up, the images not though.

And that makes sense,

If we take another look at PostItem and the imagePath

we're constructing here.

I point at images posts and then the slug of the posts

as an extra sub folder, and then the image file name.

Now I have the image directly in the post folder,

so that extra slug folder in between is missing.

We should add it.

We should add it, we go back to indexjs,

and then add our slugs here,

which we have in the dummy data as sub folders in posts.

So I'll add a sub folder with a slug of

getting-started-with-nextjs,

and I'll drag the image in there.

And I'll repeat that for my other DUMMY POSTS,

of course it's always the same image

but still to be able to render this,

I'll add more sub folders in the posts folder.

So not inside of the other slug folder

but in the posts folder, there, I will add more sub folders

with those different slug names as a folder names,

because data's required to find the image correctly.

And then we can drag and drop the image

by copying it into those other select sub folders.

So then we have to same image, four times

in those different sub folders for those different slugs.

Now the image should be fetched correctly.

If we save this again and load low closed (indistinct),

we see it.

Now what we also see, is that here on this big screen,

it's a little bit too small.

If I open up the dev tools and I resized this,

you see it doesn't really fit my card that nicely,

it doesn't really fit in there,

and that's not the behavior I want.

To fix this, we can go back to the PostItem

where we rendered that image,

and add the special layout prop.

Now I mentioned that we have a couple of values

we can set there, and the default is intrinsic,

which means, the width and height we specify here,

this is the width and height which is being used.

Now we wanna set this to responsive instead.

By setting this,

it will fill out the entire surrounding container,

this div in this case,

which has certain CSS styles

that control its width and height,

and then it will shrink and grow together

with that container.

So if you set layout to responsive

now that looks much better.

Now we take the full available space

as we moved this around.

Now, of course, it's up to you

how exactly that should be styled.

I just have some basic starting styles here.

You can, of course, fine tuned it to change the size,

and fine tuned it to your exact requirements.

I have some basic style here though,

and as you see that doesn't look too bad.

It is growing and shrinking,

and we take advantage of this automatically optimized image.

So with that we have our Featured Posts being rendered here,

and therefore the starting page of our blog is finished,

with that's dummy data, but better than nothing.

Now we can move on to the other pages and work on those.

And I will move on to the posts page now,

where I wanna render all my posts.