1
00:00:00,000 --> 00:00:03,000
So now in order to dive deeper,

2
00:00:03,000 --> 00:00:07,000
I wanna start by giving this application some styling

3
00:00:07,000 --> 00:00:09,000
so that things look a bit nicer.

4
00:00:09,000 --> 00:00:12,000
And therefore attached you find

5
00:00:12,000 --> 00:00:16,000
an updated main-header.js file,

6
00:00:16,000 --> 00:00:20,000
which you should use to replace your file with.

7
00:00:20,000 --> 00:00:23,000
So replace the content in your main-header.js file

8
00:00:23,000 --> 00:00:27,000
with the content of the attached main-header.js file.

9
00:00:29,000 --> 00:00:31,000
It's still a very simple file

10
00:00:31,000 --> 00:00:33,000
but it now got a slightly different markup

11
00:00:33,000 --> 00:00:37,000
and some extra IDs and so on to improve the styling,

12
00:00:37,000 --> 00:00:40,000
so that with the file you should have a header

13
00:00:40,000 --> 00:00:42,000
that looks like this.

14
00:00:42,000 --> 00:00:44,000
It's still not perfect though.

15
00:00:44,000 --> 00:00:48,000
Instead, what you should also do to improve the styling here

16
00:00:48,000 --> 00:00:53,000
is go to the layout.js file and wrap the MainHeader

17
00:00:54,000 --> 00:00:57,000
and the children content here with a div,

18
00:00:58,000 --> 00:01:02,000
and give that div an id of page.

19
00:01:04,000 --> 00:01:07,000
This again, is only done for styling purposes.

20
00:01:07,000 --> 00:01:10,000
And with that we now got some padding here

21
00:01:10,000 --> 00:01:12,000
and this looks nicer.

22
00:01:12,000 --> 00:01:15,000
With that, if you go to the News Page,

23
00:01:15,000 --> 00:01:17,000
this also already looks a bit nicer,

24
00:01:17,000 --> 00:01:21,000
but of course these links don't look that great.

25
00:01:21,000 --> 00:01:26,000
To make them look better, we can go to the news page.js file

26
00:01:26,000 --> 00:01:29,000
where we have all these links,

27
00:01:29,000 --> 00:01:31,000
and in there on that unordered list,

28
00:01:31,000 --> 00:01:36,000
add a class with the className prop of news-list,

29
00:01:37,000 --> 00:01:40,000
which is also one of the classes I'm targeting

30
00:01:40,000 --> 00:01:42,000
in that globals.css file

31
00:01:42,000 --> 00:01:45,000
which was part of the starting project,

32
00:01:45,000 --> 00:01:49,000
and save that updated page.js file.

33
00:01:49,000 --> 00:01:53,000
With that, those news items definitely look different,

34
00:01:53,000 --> 00:01:55,000
maybe not great yet but that will change

35
00:01:55,000 --> 00:01:59,000
once we start adding some images to them.

36
00:01:59,000 --> 00:02:04,000
And to add some images to them, we need some dummy data.

37
00:02:04,000 --> 00:02:05,000
Now in the starting project,

38
00:02:05,000 --> 00:02:09,000
I actually did already add some dummy images

39
00:02:09,000 --> 00:02:10,000
in the public folder.

40
00:02:10,000 --> 00:02:14,000
There you have a images sub-folder with a news sub-folder

41
00:02:14,000 --> 00:02:16,000
which includes some dummy images

42
00:02:16,000 --> 00:02:18,000
which we'll use for this project.

43
00:02:19,000 --> 00:02:22,000
However, the general news data is missing,

44
00:02:22,000 --> 00:02:27,000
and therefore attached, you also find a dummy-news.js file,

45
00:02:27,000 --> 00:02:28,000
which you should copy and paste

46
00:02:28,000 --> 00:02:31,000
right into your route project folder

47
00:02:31,000 --> 00:02:35,000
so that it sits next to the app and components folders.

48
00:02:37,000 --> 00:02:40,000
And in there you see I'm exporting an array

49
00:02:40,000 --> 00:02:43,000
with some DUMMY_NEWS data

50
00:02:43,000 --> 00:02:46,000
where every news item has an id,

51
00:02:46,000 --> 00:02:49,000
a slug, which is essentially also an id,

52
00:02:49,000 --> 00:02:53,000
just in a more search engine-friendly way

53
00:02:53,000 --> 00:02:55,000
and a bit more readable than an id.

54
00:02:55,000 --> 00:03:00,000
And then a title image, a date, and some dummy content.

55
00:03:00,000 --> 00:03:03,000
And that's the dummy data we'll use throughout this section.

56
00:03:04,000 --> 00:03:09,000
So with that dummy-news.js file added back on the News Page,

57
00:03:09,000 --> 00:03:12,000
you should add a import at the top

58
00:03:12,000 --> 00:03:16,000
and import the DUMMY_NEWS from that dummy-news.js file

59
00:03:16,000 --> 00:03:19,000
in the root project folder.

60
00:03:19,000 --> 00:03:22,000
And instead of outputting the links like this,

61
00:03:22,000 --> 00:03:24,000
we can now use the DUMMY_NEWS

62
00:03:25,000 --> 00:03:29,000
to map them into JSX elements

63
00:03:30,000 --> 00:03:33,000
by taking the individual newsItems,

64
00:03:33,000 --> 00:03:36,000
and for every newsItem, I wanna output a list item

65
00:03:36,000 --> 00:03:41,000
with a key of newsItem.id, for example.

66
00:03:42,000 --> 00:03:47,000
And then inside of that list item, I wanna have a link

67
00:03:47,000 --> 00:03:50,000
because these news items should still be clickable.

68
00:03:51,000 --> 00:03:53,000
And the ref of that link

69
00:03:53,000 --> 00:03:58,000
should now be dynamically constructed string

70
00:03:58,000 --> 00:04:03,000
using that template string feature JavaScript offers

71
00:04:03,000 --> 00:04:05,000
where we point at /news/

72
00:04:06,000 --> 00:04:08,000
and then some dynamically injected value

73
00:04:08,000 --> 00:04:11,000
which is different for every news item.

74
00:04:11,000 --> 00:04:14,000
And that could now either be the id or the slug.

75
00:04:14,000 --> 00:04:17,000
Both is unique, and I'll use the slug

76
00:04:17,000 --> 00:04:20,000
since that gives us nicer looking URLs.

77
00:04:22,000 --> 00:04:25,000
So with that, we got clickable links here,

78
00:04:25,000 --> 00:04:27,000
clickable newsItems,

79
00:04:27,000 --> 00:04:31,000
and the content for every newsItem should now be an image

80
00:04:31,000 --> 00:04:36,000
where the source is also a dynamically constructed string

81
00:04:36,000 --> 00:04:41,000
where we load an image from /images/news,

82
00:04:42,000 --> 00:04:44,000
because that's that folder structure we have

83
00:04:44,000 --> 00:04:45,000
in the public folder.

84
00:04:45,000 --> 00:04:49,000
We have a images folder there and then a nested news folder

85
00:04:49,000 --> 00:04:51,000
which contains the newsImages.

86
00:04:53,000 --> 00:04:55,000
Well and then the image names are stored

87
00:04:55,000 --> 00:04:58,000
in the dummy news items here.

88
00:04:59,000 --> 00:05:02,000
So they offer in page.js, it's now /

89
00:05:02,000 --> 00:05:05,000
and then again some dynamically injected value

90
00:05:05,000 --> 00:05:09,000
where we point at newsItem.image.

91
00:05:11,000 --> 00:05:14,000
And then we can also give those images an alt text

92
00:05:14,000 --> 00:05:18,000
where I will simply use the title of my news.

93
00:05:19,000 --> 00:05:22,000
And below that image in that link,

94
00:05:22,000 --> 00:05:24,000
I'd now like to have a span

95
00:05:24,000 --> 00:05:28,000
where we simply output the newsItem.title.

96
00:05:30,000 --> 00:05:34,000
With that, if you save this now and you go back,

97
00:05:34,000 --> 00:05:36,000
you'll have a nicer News Page

98
00:05:36,000 --> 00:05:38,000
where we can see those different news items

99
00:05:38,000 --> 00:05:41,000
which are these clickable boxes.

100
00:05:41,000 --> 00:05:42,000
And when we click one of them,

101
00:05:42,000 --> 00:05:44,000
we're taken to the News Detail Page.

102
00:05:44,000 --> 00:05:48,000
And of course, that page can now also be improved.

103
00:05:49,000 --> 00:05:52,000
Here in that News Detail Page,

104
00:05:52,000 --> 00:05:55,000
I'd like to output something different

105
00:05:55,000 --> 00:05:57,000
than this dummy text here,

106
00:05:58,000 --> 00:06:02,000
and therefore I'll start by identifying the actual newsItem

107
00:06:02,000 --> 00:06:04,000
for which we're showing the details.

108
00:06:05,000 --> 00:06:08,000
For that we can again use the DUMMY_NEWS,

109
00:06:08,000 --> 00:06:11,000
which therefore must be imported into this file.

110
00:06:12,000 --> 00:06:16,000
And then we can use the find method to find a newsItem

111
00:06:16,000 --> 00:06:20,000
by taking a look at the slug of that newsItem.

112
00:06:20,000 --> 00:06:22,000
And we have to take a look at the slug

113
00:06:22,000 --> 00:06:24,000
because in the news page,

114
00:06:24,000 --> 00:06:27,000
we're actually using the slug in the link path

115
00:06:27,000 --> 00:06:30,000
so that slug will be encoded in the URL.

116
00:06:32,000 --> 00:06:35,000
And hence we might want to name this here newsSlug

117
00:06:35,000 --> 00:06:38,000
because it's actually the slug we're extracting

118
00:06:38,000 --> 00:06:39,000
from the URL.

119
00:06:41,000 --> 00:06:45,000
We could also rename our placeholder from id to slug

120
00:06:45,000 --> 00:06:49,000
to make that clear, and I'll do that here.

121
00:06:49,000 --> 00:06:51,000
Of course, changing that name means

122
00:06:51,000 --> 00:06:54,000
that we also have to access params.slug now

123
00:06:54,000 --> 00:06:56,000
instead of params.id.

124
00:06:57,000 --> 00:07:00,000
But now we can compare the slug of one of the newsItems

125
00:07:00,000 --> 00:07:04,000
from the DUMMY_NEWS array to this newsSlug,

126
00:07:04,000 --> 00:07:07,000
and it's the item where both are equal,

127
00:07:07,000 --> 00:07:10,000
which we wanna show on this detail page.

128
00:07:12,000 --> 00:07:16,000
So with that here, we could then replace this fragment

129
00:07:16,000 --> 00:07:19,000
with the article element,

130
00:07:19,000 --> 00:07:24,000
and then output the actual title of the newsItem we found

131
00:07:25,000 --> 00:07:28,000
and maybe wrap this in a header element here.

132
00:07:29,000 --> 00:07:33,000
And then above this h1 element, I wanna output the image

133
00:07:33,000 --> 00:07:35,000
of this newsItem again.

134
00:07:35,000 --> 00:07:40,000
So again, it's a source that is dynamically constructed

135
00:07:40,000 --> 00:07:45,000
where we load a image from /images/news/

136
00:07:45,000 --> 00:07:49,000
and then we inject the newsItem.image name.

137
00:07:50,000 --> 00:07:54,000
And the alt text again is newsItem.title, let's say.

138
00:07:55,000 --> 00:07:58,000
And below this h1 element, I'll then output the time element

139
00:07:59,000 --> 00:08:03,000
and set this to newsItem.date,

140
00:08:03,000 --> 00:08:07,000
and actually use that as a value for the dateTime here,

141
00:08:08,000 --> 00:08:10,000
newsItem.date.

142
00:08:12,000 --> 00:08:14,000
We could also format this date,

143
00:08:14,000 --> 00:08:19,000
but I'm actually happy with that pretty bare-bones look

144
00:08:19,000 --> 00:08:21,000
we'll have out of the box.

145
00:08:21,000 --> 00:08:25,000
Now, last but not least, the paragraph content down there

146
00:08:25,000 --> 00:08:30,000
should be newsItem.content.

147
00:08:30,000 --> 00:08:32,000
For styling purposes,

148
00:08:32,000 --> 00:08:35,000
you should also add a className to that article

149
00:08:35,000 --> 00:08:36,000
which wraps everything,

150
00:08:36,000 --> 00:08:39,000
and set this to news-article.

151
00:08:41,000 --> 00:08:43,000
And with that, if you save everything,

152
00:08:43,000 --> 00:08:46,000
the News Detail Page should look like this.

153
00:08:46,000 --> 00:08:50,000
And therefore now, this app definitely improved

154
00:08:50,000 --> 00:08:52,000
regarding its visuals,

155
00:08:52,000 --> 00:08:54,000
and we can now start adding more

156
00:08:54,000 --> 00:08:57,000
Next.js specific features to it.