Loading video player...
Okay then gang, now we've got the
starter site up and running and we've
also created a new hygiaph project. So
now I want to start making content on
hygraph which we can then fetch from the
next JS site and show in the browser. In
our case we want to make some blog post
content and also some content for an
about page. So how do we do that then?
Well, if we click on the content link
over here, we're going to see a message
telling us we've not created any content
models yet. And there's a button here
that says go to the schema builder which
is where we can make a new content model
from. So before we add any content like
a blog post for example, we have to make
a model for that type of data. A blog
model and that model outlines what
fields that content type should have.
For example, a title field, a summary
field, a thumbnail field, etc. Once we
have that content model created, two
things are then going to happen. One,
we're allowed to add new entries for
that content model. two hygraph updates
the graphql schema so we can query that
content from the front end. So then we
can click on this button right here and
that just takes us to the schema page
which you can also reach by clicking on
the schema link in the sidebar. Then we
can click on this button to make a new
content model. So let's give this model
a display name which I'm going to call
post because it's going to be a blog
post model. The next two fields, the ID
for the GraphQL API and the plural of
that are automatically generated for us
based on the name we give it. And the
description field is optional. So I'm
just going to skip that for now and hit
the add model button. So then once that
model's created, we should see over here
on the left under models. And now we can
start adding new fields to it. Now
before we do that, I just want to toggle
this switch right here to show the
built-in system fields. And these fields
are automatically applied to every new
model that you create in Higgraph. So
they include things like the ID field,
uh the created at field, updated at and
so forth. And these fields are managed
by Higgraph and they get updated for us
automatically, but we can still query
them from the front end, which is nice.
Anyway, let's toggle that back off and
we're going to start adding some fields
of our own. So then, what fields do we
need for a new blog post? Well, I'm
thinking that we need a title field, a
one or twoline summary as well, a
content field for the actual post
content, and maybe a post thumbnail as
well. So, let's start by adding the
title field. Now, when we're adding new
fields to a model, we can choose from
the different field types listed on the
right hand side over here. And all of
these field types are organized into
data types, I guess, like strings,
integers floats booleans dates JSON
etc. So we can just drag and drop one of
these fields like the single line text
field over here to add it to the model.
And when we do that, a form is going to
slide right out for us to configure that
field. So we need a name for the field,
which is going to be title. And as we
type that, the API ID automatically
updates for us as well. We could add a
description, but we'll skip that because
the title is pretty self-explanatory.
Right now down here we've got some extra
field options and the first one is
autocheed for us which is use as title
field and that basically means look
shall we use this field as the main
identifying field of a content entry.
Does that make sense? So I'm going to
keep this checked. Next we can make the
field localized which enables different
values for different translations. We're
going to keep this unchecked because
we're not going to be working with
translations. But then down here we've
got some validation options. Now, we're
going to check the first one, which is
to make the field required. We'll also
check the second one to make the title
unique because we don't want multiple
blogs with the same title. The third
option is to limit the character length,
which I'm just going to leave. The
fourth one is to make it match a regular
expression pattern like an email, which
I'm also going to leave unchecked. And
the last one is to restrict reex
patterns, which again I'm going to just
leave unchecked. We don't want to do
that. then we can skip over these
advanced options as well and just click
on the add button to add the new text
field to the model. Okay, so now we can
see that first field in this post model.
And if we hover over that field, we
should see a little edit button in case
we ever want to edit or change anything
about that field. So then next I want to
add a slug field which is a URL friendly
identifier. So let me drag and drop that
below the title field. And same again,
we're going to see a form slide out so
that we can configure this field. So the
title of this is going to be slug and
the API ID autogenerates based on that
value. And down here this time we've got
a different option which is to generate
the slug from a template. And that means
we can have Higgraph autogenerate a
value for this slug field based on the
value of another field in this model.
And we can reference any other field in
curly braces right here. For example, I
want the slug to be generated based on
the title value, right? The title of the
blog post. So I can use curly braces and
then the name of that title field, which
is just title. And now higgraph should
autopop populate the slug field for any
new posts based on whatever title we
give to the post, replacing spaces with
hyphens. I also want to keep this next
option checked, which is to make the
slug field all lowercase. Then I'm going
to scroll all the way down to the
validations and make sure that the field
is required. Make sure it's unique
because we don't want two slugs the
same. And also keep this pattern match
checked as well, which means only these
characters can be used to start the slug
followed by this repeating pattern of
either dashes, slashes, or the same
subset of characters. Basically, this
limits the field to being a URL friendly
slugike string. All right. So then I'm
going to come right down here and click
on add to add this second field to the
model. All right. So let's add the next
fields. Next up, we're going to want a
summary. And rather than this be a
single line of text, we want it to be a
multi-line text because there might be
two or three sentences. So let's add
that in below the slug right here. And
for a display name, we'll say summary.
This gets autopop populated. And then
down here, we can allow multiple values.
Can we? No. Localized field. No. Um,
we're going to make this required
because we do want every post to have a
summary. It doesn't need to be unique.
Let's limit the character count. Let's
say that the min is going to be 10
characters and the max is 200. So, it
can't be a huge summary, but there must
be a couple of sentences. All right. So
down here, we don't need the advanced
ones. Let's click add to add this field.
And then after the summary, we want a
rich text field. So let's add that over
here. This is for the page content
itself. So we will call this content.
And then down here, we don't want enable
embedding. Basically, that allows you to
reference other posts. We're not going
to do that. Um, if we keep scrolling
down, these are the formatting options.
So this is a rich text field, right? So
it allows us to format the text as we
type it. And these are the different
options available in that rich text
editor. So you can uncheck any of these
if you don't want them. For example, if
you don't want links, then I think there
is a link option right here. You can
deselect this and then users won't be
able to add links in that rich text. I'm
going to keep them all selected though.
This is required. Doesn't need to be
unique. And we'll add this.
All right. So there's one more and that
is the thumbnail field. So let's scroll
down here see what we've got and it is
this one right here asset picker. So if
we bring this at the bottom we can call
this thumbnail
like so. And now we can say we don't
want allow multiple assets to be checked
because it's only one thumbnail per
post. Um it's not going to be required
either because to begin with we're not
going to be using images. I'm adding
this image field now, but we're not
going to be using them until later on in
the course. But I still want to add
posts. So I don't want to make this
field required just yet. Maybe in the
future it would be required, but I think
that's all we need. So let's click on
add to add this final field.
Okay then. So I think now we've got
everything we need for the post model
and we could start adding some post
content right now. However, I also want
to make one more content model and that
is a page model. so that we can deliver
page content like for the about page in
the app from hierraph as well. So from
here let's go to the little add button
in the sidebar up here to where it says
models and click on that to make a new
one. And this time I want the name of
this model to be page. And as we type
that the following two fields they're
autopop populated again based on that
name. So we'll leave off the description
again for now and we're just going to
hit the add model button down here to
make that model. And then again, we just
need to add the different fields for
this model, which is going to be pretty
similar to the fields on a post, right?
We need a title for the page. We need a
slug and a content field for the actual
page content. The only things we don't
need really that a post have is the
thumbnail and also the summary. So then,
since we've already seen how to make
these fields before, I'm going to speed
this video up now while I add them. Then
once I'm done, I'm going to slow it down
again.
All right. So, I've done that now. And
now we have a post model for blog post
content. And we've added a page model
for page content. And now, if we tried
going to the content page by clicking
the link in the sidebar, we should see
if we open the custom views section on
the sidebar here, those two models. And
if we click on one of those models,
we're going to see a button to add a new
entry for that model over here. So,
we're not going to start adding content
in this lesson, but we will do that in
the next lesson. And we'll also have a
play around with the GraphQL API for the
content using this built-in playground
area as well.
In this Hygraph CMS tutorial, you'll learn how to create a simple blog site by hooking it into a Next.js application and make GraphQL requests. πΏπ Get early access to the full course on NetNinja.dev: https://netninja.dev/p/hygraph-with-next-js-tutorial π₯π Get access to premium courses with Net Ninja Pro: https://netninja.dev/p/net-ninja-pro/#prosignup ππ Course files on GitHub: https://github.com/iamshaunjp/hygraph-with-next ππ Hygraph Docs: https://hygraph.com/docs π§ π Git and GitHub Masterclass: https://netninja.dev/p/git-github-masterclass π§ π Next.js Masterclass: https://netninja.dev/p/next-13-masterclass