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.