Now with all our pages finished
and with all that data being fetched and used,
and with us being able to add a new meetup here,
with that we added all the functionality
that I wanted to add to this demo project
and with that, we also used all those core NextJS features:
file-based routing, API routes
and of course, also page pre-rendering
with data fetching, for example, with getStaticProps.
Now that this app is finished, what's missing?
Well, we wanna deploy it.
We don't just wanna have it here locally
on our local machine with that development server
but instead, we wanna deploy it,
put it onto a remote machine
so that users from all over the world
can visit our application.
Now, therefore, we are going to deploy it
but before we do that,
there is one thing we should also do,
one thing you should double check
for any kind of NextJS project you're building
or for any kind of web project in general.
And that's metadata,
which you might wanna add to your pages.
The content is there on our pages.
We do have the content visible on the screen
and that's the most important part, of course.
But at this point, we haven't added any metadata.
If we inspect the rendered HTML code,
the head section is relatively empty.
We do have some meta tags here
but we are missing the description meta tag,
which would be important for search engines.
I'm talking about the description meta tag,
which allows you to set descriptions,
which, for example, show up on a Google search here.
And we're also missing a page title,
which is why here in the tab title,
we only see the address as a title.
And if our pages would show up
as search results later,
we also want the title like in this case here,
Academind, for my own website.
So setting such meta tags,
adding such Head elements,
that is something we definitely also wanna do
when we build a site
and that is something which we wanna do here as well.
And adding such head elements to our pages
is thankfully very simple with NextJS.
Let's start on the index.js page.
So the HomePage.
There we definitely wanna set some title
and we definitely also wanna add a description.
And to do that, we can import a special component offered
by NextJS, the Head component imported from next/head.
This is a component which allows you to add Head elements
to the Head section of your page.
How do you use it?
You simply add it to your returned JSX code.
So here next to the MeetupList,
I wanna add the Head element, the Head component
and since adjacent JSX code is not allowed,
I will use the React Fragment imported
from React, here is the import,
imported from React.
I'll use Fragment to wrap Head and MeetupList.
And now inside of these Head tags here
between the opening and closing Head component tag,
there you can now insert your Head elements.
So all the HTML elements,
which you can add in the Head section,
you can add them here.
Like for example, the title.
And then we could give this page a title
of React Meetups, or whatever title we want to have here.
And actually make sure that this is returned like this.
If we then save this,
and we visit our starting page,
you will notice that now here
in the tab title, we see that title which I set here.
And of course, we also see this in the page source code.
There we'll be able to find the title
in the Head section.
Here it is.
And we also see that if we open the dev tools
and inspect the rendered elements here.
Here's our title as well.
So that's how we can add a title
and that's how we can also add this meta tag,
which holds the description,
which will be picked up by search engines, like Google.
Browse a huge list of highly active React meetups.
That could be our meta description for this page
and that would be the text
which shows up when our page shows up
as a result on a search engine, for example.
So with that added, we now added some meta data,
some Head data to this starting page.
And we can do this on all the pages.
On the NewMeetupPage, for example,
I don't just wanna return the NewMeetupForm,
but also add the Fragment here imported
from React of course,
and then between the Fragment opening and closing tags,
have our adjacent JSX code to have the Head section there
and the NewMeetupForm.
Head is, of course, a component
which we also need to import now.
So import Head from next/head like this.
And now here we can set a title as well,
like Add a New Meetup.
And we can also update the description
and change this to Add your own meetups.
Create amazing networking opportunities.
Like this.
So now this is added here as well
and hence, if we visit the Add New Meetup page,
we see our title here
and of course, in the dev tools,
we also see this description meta tag here
in the Head section.
Now, last but not least,
we also want to set a title
and show a description if we view a single meetup.
And therefore, we should also go
to this single meetupId page
and also wrap this into a Fragment here
and add this Head component
and bring the MeetupDetail into this Fragment as well.
And then, of course, make sure that you import Fragment
from React and import Head from next/head, like this.
And then here between the opening and closing Head tags,
we can also add a title
and of course, here the title
will not be a static hard coded title
as it on the other pages
where it's always the same title
but instead here, for a single loaded meetup item
on that MeetupDetails page,
here I actually want to use the title of that meetup
as a title for this page
so that different meetups
have different titles on their pages.
And hence different meetups showing up on a search engine,
which show up with different titles
and descriptions there as well.
And making this title dynamic instead of static
is super simple.
After all, we are in our regular returned
JSX code snippet block.
So we can use all the standard React features here
and for example, output the result
of a dynamic expression with curly braces.
And then output props.meetupData.title as a title here
and then add this meta tag here
for the description, oops, description.
And a content of some content.
And then here make the content dynamic
and output props.meetupData.description, for example,
or whatever you wanna output as a description.
And therefore, we can set a hard coded description
as we do it on the Add a New Meetup page, for example.
But we can also set a dynamic value
as we're doing it here.
And with that, if we save this and reload this page,
this single meetup page,
we see that title here in the tab
and if we inspect this here,
in the Head section, we also see the title
and we see this description
with the actual meetup description text.
And now with that, we really prepared our page
for deployment, our website for deployment
because with that, we make sure
that search engines get all that extra metadata
and we also show our users some nice titles here as well.
And with that, let's now deploy this site.