1
00:00:02,000 --> 00:00:05,000
Now with all our pages finished

2
00:00:05,000 --> 00:00:08,000
and with all that data being fetched and used,

3
00:00:08,000 --> 00:00:11,000
and with us being able to add a new meetup here,

4
00:00:11,000 --> 00:00:14,000
with that we added all the functionality

5
00:00:14,000 --> 00:00:17,000
that I wanted to add to this demo project

6
00:00:17,000 --> 00:00:22,000
and with that, we also used all those core NextJS features:

7
00:00:23,000 --> 00:00:27,000
file-based routing, API routes

8
00:00:27,000 --> 00:00:30,000
and of course, also page pre-rendering

9
00:00:30,000 --> 00:00:33,000
with data fetching, for example, with getStaticProps.

10
00:00:34,000 --> 00:00:38,000
Now that this app is finished, what's missing?

11
00:00:38,000 --> 00:00:40,000
Well, we wanna deploy it.

12
00:00:40,000 --> 00:00:43,000
We don't just wanna have it here locally

13
00:00:43,000 --> 00:00:47,000
on our local machine with that development server

14
00:00:47,000 --> 00:00:49,000
but instead, we wanna deploy it,

15
00:00:49,000 --> 00:00:51,000
put it onto a remote machine

16
00:00:51,000 --> 00:00:54,000
so that users from all over the world

17
00:00:54,000 --> 00:00:56,000
can visit our application.

18
00:00:56,000 --> 00:00:59,000
Now, therefore, we are going to deploy it

19
00:00:59,000 --> 00:01:02,000
but before we do that,

20
00:01:02,000 --> 00:01:04,000
there is one thing we should also do,

21
00:01:04,000 --> 00:01:07,000
one thing you should double check

22
00:01:07,000 --> 00:01:10,000
for any kind of NextJS project you're building

23
00:01:10,000 --> 00:01:13,000
or for any kind of web project in general.

24
00:01:13,000 --> 00:01:15,000
And that's metadata,

25
00:01:15,000 --> 00:01:18,000
which you might wanna add to your pages.

26
00:01:18,000 --> 00:01:21,000
The content is there on our pages.

27
00:01:21,000 --> 00:01:25,000
We do have the content visible on the screen

28
00:01:25,000 --> 00:01:27,000
and that's the most important part, of course.

29
00:01:27,000 --> 00:01:32,000
But at this point, we haven't added any metadata.

30
00:01:32,000 --> 00:01:35,000
If we inspect the rendered HTML code,

31
00:01:35,000 --> 00:01:39,000
the head section is relatively empty.

32
00:01:39,000 --> 00:01:41,000
We do have some meta tags here

33
00:01:41,000 --> 00:01:44,000
but we are missing the description meta tag,

34
00:01:44,000 --> 00:01:47,000
which would be important for search engines.

35
00:01:47,000 --> 00:01:50,000
I'm talking about the description meta tag,

36
00:01:50,000 --> 00:01:52,000
which allows you to set descriptions,

37
00:01:52,000 --> 00:01:56,000
which, for example, show up on a Google search here.

38
00:01:58,000 --> 00:02:00,000
And we're also missing a page title,

39
00:02:00,000 --> 00:02:03,000
which is why here in the tab title,

40
00:02:03,000 --> 00:02:06,000
we only see the address as a title.

41
00:02:06,000 --> 00:02:08,000
And if our pages would show up

42
00:02:08,000 --> 00:02:10,000
as search results later,

43
00:02:10,000 --> 00:02:13,000
we also want the title like in this case here,

44
00:02:13,000 --> 00:02:16,000
Academind, for my own website.

45
00:02:16,000 --> 00:02:18,000
So setting such meta tags,

46
00:02:18,000 --> 00:02:20,000
adding such Head elements,

47
00:02:20,000 --> 00:02:23,000
that is something we definitely also wanna do

48
00:02:23,000 --> 00:02:24,000
when we build a site

49
00:02:24,000 --> 00:02:28,000
and that is something which we wanna do here as well.

50
00:02:28,000 --> 00:02:31,000
And adding such head elements to our pages

51
00:02:31,000 --> 00:02:35,000
is thankfully very simple with NextJS.

52
00:02:35,000 --> 00:02:38,000
Let's start on the index.js page.

53
00:02:38,000 --> 00:02:40,000
So the HomePage.

54
00:02:40,000 --> 00:02:43,000
There we definitely wanna set some title

55
00:02:43,000 --> 00:02:47,000
and we definitely also wanna add a description.

56
00:02:47,000 --> 00:02:52,000
And to do that, we can import a special component offered

57
00:02:52,000 --> 00:02:57,000
by NextJS, the Head component imported from next/head.

58
00:02:59,000 --> 00:03:03,000
This is a component which allows you to add Head elements

59
00:03:03,000 --> 00:03:06,000
to the Head section of your page.

60
00:03:06,000 --> 00:03:08,000
How do you use it?

61
00:03:08,000 --> 00:03:12,000
You simply add it to your returned JSX code.

62
00:03:12,000 --> 00:03:14,000
So here next to the MeetupList,

63
00:03:14,000 --> 00:03:18,000
I wanna add the Head element, the Head component

64
00:03:18,000 --> 00:03:22,000
and since adjacent JSX code is not allowed,

65
00:03:22,000 --> 00:03:25,000
I will use the React Fragment imported

66
00:03:25,000 --> 00:03:29,000
from React, here is the import,

67
00:03:29,000 --> 00:03:31,000
imported from React.

68
00:03:31,000 --> 00:03:35,000
I'll use Fragment to wrap Head and MeetupList.

69
00:03:36,000 --> 00:03:40,000
And now inside of these Head tags here

70
00:03:40,000 --> 00:03:44,000
between the opening and closing Head component tag,

71
00:03:44,000 --> 00:03:48,000
there you can now insert your Head elements.

72
00:03:48,000 --> 00:03:50,000
So all the HTML elements,

73
00:03:50,000 --> 00:03:52,000
which you can add in the Head section,

74
00:03:52,000 --> 00:03:53,000
you can add them here.

75
00:03:53,000 --> 00:03:55,000
Like for example, the title.

76
00:03:55,000 --> 00:03:57,000
And then we could give this page a title

77
00:03:57,000 --> 00:04:02,000
of React Meetups, or whatever title we want to have here.

78
00:04:03,000 --> 00:04:06,000
And actually make sure that this is returned like this.

79
00:04:06,000 --> 00:04:08,000
If we then save this,

80
00:04:08,000 --> 00:04:11,000
and we visit our starting page,

81
00:04:11,000 --> 00:04:14,000
you will notice that now here

82
00:04:14,000 --> 00:04:19,000
in the tab title, we see that title which I set here.

83
00:04:19,000 --> 00:04:22,000
And of course, we also see this in the page source code.

84
00:04:22,000 --> 00:04:25,000
There we'll be able to find the title

85
00:04:25,000 --> 00:04:26,000
in the Head section.

86
00:04:27,000 --> 00:04:28,000
Here it is.

87
00:04:29,000 --> 00:04:31,000
And we also see that if we open the dev tools

88
00:04:31,000 --> 00:04:33,000
and inspect the rendered elements here.

89
00:04:33,000 --> 00:04:35,000
Here's our title as well.

90
00:04:37,000 --> 00:04:39,000
So that's how we can add a title

91
00:04:39,000 --> 00:04:43,000
and that's how we can also add this meta tag,

92
00:04:43,000 --> 00:04:44,000
which holds the description,

93
00:04:44,000 --> 00:04:49,000
which will be picked up by search engines, like Google.

94
00:04:49,000 --> 00:04:54,000
Browse a huge list of highly active React meetups.

95
00:04:55,000 --> 00:04:59,000
That could be our meta description for this page

96
00:04:59,000 --> 00:05:01,000
and that would be the text

97
00:05:01,000 --> 00:05:04,000
which shows up when our page shows up

98
00:05:04,000 --> 00:05:07,000
as a result on a search engine, for example.

99
00:05:08,000 --> 00:05:11,000
So with that added, we now added some meta data,

100
00:05:11,000 --> 00:05:14,000
some Head data to this starting page.

101
00:05:14,000 --> 00:05:17,000
And we can do this on all the pages.

102
00:05:17,000 --> 00:05:19,000
On the NewMeetupPage, for example,

103
00:05:19,000 --> 00:05:22,000
I don't just wanna return the NewMeetupForm,

104
00:05:22,000 --> 00:05:25,000
but also add the Fragment here imported

105
00:05:25,000 --> 00:05:27,000
from React of course,

106
00:05:28,000 --> 00:05:31,000
and then between the Fragment opening and closing tags,

107
00:05:31,000 --> 00:05:36,000
have our adjacent JSX code to have the Head section there

108
00:05:36,000 --> 00:05:38,000
and the NewMeetupForm.

109
00:05:38,000 --> 00:05:39,000
Head is, of course, a component

110
00:05:39,000 --> 00:05:41,000
which we also need to import now.

111
00:05:41,000 --> 00:05:46,000
So import Head from next/head like this.

112
00:05:48,000 --> 00:05:50,000
And now here we can set a title as well,

113
00:05:50,000 --> 00:05:54,000
like Add a New Meetup.

114
00:05:54,000 --> 00:05:55,000
And we can also update the description

115
00:05:55,000 --> 00:06:00,000
and change this to Add your own meetups.

116
00:06:00,000 --> 00:06:05,000
Create amazing networking opportunities.

117
00:06:06,000 --> 00:06:07,000
Like this.

118
00:06:08,000 --> 00:06:10,000
So now this is added here as well

119
00:06:11,000 --> 00:06:15,000
and hence, if we visit the Add New Meetup page,

120
00:06:15,000 --> 00:06:17,000
we see our title here

121
00:06:17,000 --> 00:06:18,000
and of course, in the dev tools,

122
00:06:18,000 --> 00:06:22,000
we also see this description meta tag here

123
00:06:22,000 --> 00:06:23,000
in the Head section.

124
00:06:25,000 --> 00:06:26,000
Now, last but not least,

125
00:06:26,000 --> 00:06:28,000
we also want to set a title

126
00:06:28,000 --> 00:06:32,000
and show a description if we view a single meetup.

127
00:06:32,000 --> 00:06:34,000
And therefore, we should also go

128
00:06:34,000 --> 00:06:36,000
to this single meetupId page

129
00:06:36,000 --> 00:06:39,000
and also wrap this into a Fragment here

130
00:06:41,000 --> 00:06:44,000
and add this Head component

131
00:06:44,000 --> 00:06:48,000
and bring the MeetupDetail into this Fragment as well.

132
00:06:48,000 --> 00:06:51,000
And then, of course, make sure that you import Fragment

133
00:06:51,000 --> 00:06:56,000
from React and import Head from next/head, like this.

134
00:06:58,000 --> 00:07:01,000
And then here between the opening and closing Head tags,

135
00:07:01,000 --> 00:07:03,000
we can also add a title

136
00:07:03,000 --> 00:07:04,000
and of course, here the title

137
00:07:04,000 --> 00:07:07,000
will not be a static hard coded title

138
00:07:07,000 --> 00:07:09,000
as it on the other pages

139
00:07:09,000 --> 00:07:12,000
where it's always the same title

140
00:07:12,000 --> 00:07:15,000
but instead here, for a single loaded meetup item

141
00:07:15,000 --> 00:07:17,000
on that MeetupDetails page,

142
00:07:17,000 --> 00:07:21,000
here I actually want to use the title of that meetup

143
00:07:21,000 --> 00:07:24,000
as a title for this page

144
00:07:24,000 --> 00:07:26,000
so that different meetups

145
00:07:26,000 --> 00:07:28,000
have different titles on their pages.

146
00:07:29,000 --> 00:07:32,000
And hence different meetups showing up on a search engine,

147
00:07:32,000 --> 00:07:35,000
which show up with different titles

148
00:07:35,000 --> 00:07:37,000
and descriptions there as well.

149
00:07:37,000 --> 00:07:40,000
And making this title dynamic instead of static

150
00:07:40,000 --> 00:07:42,000
is super simple.

151
00:07:42,000 --> 00:07:45,000
After all, we are in our regular returned

152
00:07:45,000 --> 00:07:48,000
JSX code snippet block.

153
00:07:48,000 --> 00:07:51,000
So we can use all the standard React features here

154
00:07:51,000 --> 00:07:53,000
and for example, output the result

155
00:07:53,000 --> 00:07:57,000
of a dynamic expression with curly braces.

156
00:07:57,000 --> 00:08:02,000
And then output props.meetupData.title as a title here

157
00:08:02,000 --> 00:08:05,000
and then add this meta tag here

158
00:08:05,000 --> 00:08:08,000
for the description, oops, description.

159
00:08:08,000 --> 00:08:11,000
And a content of some content.

160
00:08:12,000 --> 00:08:15,000
And then here make the content dynamic

161
00:08:15,000 --> 00:08:20,000
and output props.meetupData.description, for example,

162
00:08:21,000 --> 00:08:24,000
or whatever you wanna output as a description.

163
00:08:25,000 --> 00:08:29,000
And therefore, we can set a hard coded description

164
00:08:29,000 --> 00:08:33,000
as we do it on the Add a New Meetup page, for example.

165
00:08:33,000 --> 00:08:35,000
But we can also set a dynamic value

166
00:08:35,000 --> 00:08:37,000
as we're doing it here.

167
00:08:38,000 --> 00:08:41,000
And with that, if we save this and reload this page,

168
00:08:41,000 --> 00:08:44,000
this single meetup page,

169
00:08:44,000 --> 00:08:47,000
we see that title here in the tab

170
00:08:47,000 --> 00:08:49,000
and if we inspect this here,

171
00:08:49,000 --> 00:08:51,000
in the Head section, we also see the title

172
00:08:51,000 --> 00:08:53,000
and we see this description

173
00:08:53,000 --> 00:08:56,000
with the actual meetup description text.

174
00:08:57,000 --> 00:09:00,000
And now with that, we really prepared our page

175
00:09:00,000 --> 00:09:04,000
for deployment, our website for deployment

176
00:09:04,000 --> 00:09:06,000
because with that, we make sure

177
00:09:06,000 --> 00:09:09,000
that search engines get all that extra metadata

178
00:09:09,000 --> 00:09:14,000
and we also show our users some nice titles here as well.

179
00:09:14,000 --> 00:09:17,000
And with that, let's now deploy this site.