So now in order to dive deeper,
I wanna start by giving this application some styling
so that things look a bit nicer.
And therefore attached you find
an updated main-header.js file,
which you should use to replace your file with.
So replace the content in your main-header.js file
with the content of the attached main-header.js file.
It's still a very simple file
but it now got a slightly different markup
and some extra IDs and so on to improve the styling,
so that with the file you should have a header
that looks like this.
It's still not perfect though.
Instead, what you should also do to improve the styling here
is go to the layout.js file and wrap the MainHeader
and the children content here with a div,
and give that div an id of page.
This again, is only done for styling purposes.
And with that we now got some padding here
and this looks nicer.
With that, if you go to the News Page,
this also already looks a bit nicer,
but of course these links don't look that great.
To make them look better, we can go to the news page.js file
where we have all these links,
and in there on that unordered list,
add a class with the className prop of news-list,
which is also one of the classes I'm targeting
in that globals.css file
which was part of the starting project,
and save that updated page.js file.
With that, those news items definitely look different,
maybe not great yet but that will change
once we start adding some images to them.
And to add some images to them, we need some dummy data.
Now in the starting project,
I actually did already add some dummy images
in the public folder.
There you have a images sub-folder with a news sub-folder
which includes some dummy images
which we'll use for this project.
However, the general news data is missing,
and therefore attached, you also find a dummy-news.js file,
which you should copy and paste
right into your route project folder
so that it sits next to the app and components folders.
And in there you see I'm exporting an array
with some DUMMY_NEWS data
where every news item has an id,
a slug, which is essentially also an id,
just in a more search engine-friendly way
and a bit more readable than an id.
And then a title image, a date, and some dummy content.
And that's the dummy data we'll use throughout this section.
So with that dummy-news.js file added back on the News Page,
you should add a import at the top
and import the DUMMY_NEWS from that dummy-news.js file
in the root project folder.
And instead of outputting the links like this,
we can now use the DUMMY_NEWS
to map them into JSX elements
by taking the individual newsItems,
and for every newsItem, I wanna output a list item
with a key of newsItem.id, for example.
And then inside of that list item, I wanna have a link
because these news items should still be clickable.
And the ref of that link
should now be dynamically constructed string
using that template string feature JavaScript offers
where we point at /news/
and then some dynamically injected value
which is different for every news item.
And that could now either be the id or the slug.
Both is unique, and I'll use the slug
since that gives us nicer looking URLs.
So with that, we got clickable links here,
clickable newsItems,
and the content for every newsItem should now be an image
where the source is also a dynamically constructed string
where we load an image from /images/news,
because that's that folder structure we have
in the public folder.
We have a images folder there and then a nested news folder
which contains the newsImages.
Well and then the image names are stored
in the dummy news items here.
So they offer in page.js, it's now /
and then again some dynamically injected value
where we point at newsItem.image.
And then we can also give those images an alt text
where I will simply use the title of my news.
And below that image in that link,
I'd now like to have a span
where we simply output the newsItem.title.
With that, if you save this now and you go back,
you'll have a nicer News Page
where we can see those different news items
which are these clickable boxes.
And when we click one of them,
we're taken to the News Detail Page.
And of course, that page can now also be improved.
Here in that News Detail Page,
I'd like to output something different
than this dummy text here,
and therefore I'll start by identifying the actual newsItem
for which we're showing the details.
For that we can again use the DUMMY_NEWS,
which therefore must be imported into this file.
And then we can use the find method to find a newsItem
by taking a look at the slug of that newsItem.
And we have to take a look at the slug
because in the news page,
we're actually using the slug in the link path
so that slug will be encoded in the URL.
And hence we might want to name this here newsSlug
because it's actually the slug we're extracting
from the URL.
We could also rename our placeholder from id to slug
to make that clear, and I'll do that here.
Of course, changing that name means
that we also have to access params.slug now
instead of params.id.
But now we can compare the slug of one of the newsItems
from the DUMMY_NEWS array to this newsSlug,
and it's the item where both are equal,
which we wanna show on this detail page.
So with that here, we could then replace this fragment
with the article element,
and then output the actual title of the newsItem we found
and maybe wrap this in a header element here.
And then above this h1 element, I wanna output the image
of this newsItem again.
So again, it's a source that is dynamically constructed
where we load a image from /images/news/
and then we inject the newsItem.image name.
And the alt text again is newsItem.title, let's say.
And below this h1 element, I'll then output the time element
and set this to newsItem.date,
and actually use that as a value for the dateTime here,
newsItem.date.
We could also format this date,
but I'm actually happy with that pretty bare-bones look
we'll have out of the box.
Now, last but not least, the paragraph content down there
should be newsItem.content.
For styling purposes,
you should also add a className to that article
which wraps everything,
and set this to news-article.
And with that, if you save everything,
the News Detail Page should look like this.
And therefore now, this app definitely improved
regarding its visuals,
and we can now start adding more
Next.js specific features to it.