All right then my friends in this series

we're going to be looking at Higraph

which is a headless content management

system and by headless I mean it's

completely separate from the front end

so you could plug it into whatever

framework that you want next.js Flutter

Astro you name it and Higraph itself is

only concerned with managing storing and

delivering the content like blog posts

or products or reviews or whatever other

content you might show on your website.

It also offers a native GraphQL API that

we can easily use to fetch any content

stored in the CMS. And it comes with a

built-in query playground that we can

use to build and test our queries, which

is really nice. It's incredibly simple

to use. And best of all, it is free for

smaller personal projects. In this

course, then we're going to be using

Hygraph to make a simple blog

application with Next.js that looks

something like this. So, we have a

homepage which shows the latest blogs.

We can click on one of those to see that

blog in full on a blog details page. On

the right of this page, we've got a

little sidebar where we also list other

blogs by the same author and we can

click on those to see them as well. And

then back on the homepage, we've got

pageionation in place to load more blogs

when we click on the load more button

down here. And all of this blog content

plus the content for an about page is

stored and delivered by Hygraph. We're

just fetching it using Higgraph's

GraphQL content API from within the

Nex.js application. And because Hyigraph

is headless, it means I could easily use

the same content within a completely

different project and different front

end if I wanted to. Now, I will say

before you go any further that at this

point you should have at least a basic

knowledge of Next.js. So, ideally, you

already know how to build a simple Next

app using a mix of server components,

client components, server actions,

hooks, and state and all that jazz. If

you don't and you want to brush up your

nextjs skills first, then I've got a

whole next.js masterclass course which I

will leave the link to down below the

video. I've also got a smaller Nex.js

crash course on YouTube as well.

Alternatively, if you want to follow

along using a different front end like

Nux, Astro or something else completely,

you can do that as well because like I

said before, Hyigraph is only concerned

with managing and delivering content and

not so much with what front end you use.

Anyway, with that out of the way, let's

crack on and get the start project up

and running. So then you can find the

starter project on this GitHub repo

right here, which I will leave the link

to down below the video. And from here,

you just need to make sure the starter

project branch is selected from the

dropown. Once you've done that, you can

just hit the code button over here and

download a zip of the project to your

computer. Then you're just going to need

to unzip that and open it inside VS Code

or whatever editor that you might be

using. And just while we're on this

page, I want to let you know I've also

uploaded the code for each individual

lesson as well. And you can access that

code in the same way by selecting the

lesson from the branch right here, the

branch dropdown, then either browsing

the code here on GitHub or downloading a

zip by coming to the code button again.

Alternatively, if you're proficient with

Git, you can clone this repo to your

computer and just switch to these

branches locally. Okay, then. So, I've

got that starter project open in VS Code

now. And the first thing we're going to

do is open a terminal and install any

dependencies which we can do by typing

npm install and then hitting enter. Then

I'm just going to close this off and

very quickly walk through the files in

the starter project so that you're up to

speed with it. First then we have got a

source folder where all the application

source code like pages, components, and

stylesheets live. Inside that we've got

the app folder because we're using the

newer app router instead of the older

pages router. And then inside the app

folder, we've got the homepage, which is

the page.jsx file down here, as well as

the layout file and the global

stylesheet. Now, if we look at that page

file, we should see it's a really simple

page component with a title, a bit of

dummy text, and then this post list

component down here as well. And we pass

a prop to that post list component

called initial posts, which at the

moment is just an empty array because we

haven't fetched any posts yet. So that

postlist component lives inside this

components folder which is where I've

put any drop in or reusable components.

And if we open that file, you should see

that all we do is accept that initial

posts prop and then set it to be the

initial value of this little bit of

state called posts. Then down here in

the template, we map through those posts

and output a bit of content for each

one. A thumbnail image, which is

defaulting to this placeholder one right

now, a title and a summary. Now,

obviously at the moment those values are

hardcoded, but when we actually have

some posts later, we'll be outputting

them dynamically here. Finally, we've

got a button down here to read more,

which will eventually use the post slug

to link to the dynamic blog details

page, which we'll see in a moment. And

this gradient button component, by the

way, is nothing special. It's just a

reusable button component that I made,

which has a gradient background and a

small chevron icon added to it. Anyway,

at the very bottom of this post list

component, we've got another regular

button which does nothing at the moment,

but later we'll use this to implement

pageionation and load more posts. So

then I mentioned a minute ago that this

read more button up here links to the

dynamic blog details page eventually

using the slug of the post as part of

the link. So the full path is

forward/blog then forward slash whatever

the slug is where the slug will be

dynamic and different for each post and

that blog details page is inside the

blog folder up here and then inside

another folder called slug with square

brackets around it. Now the square

brackets tells Nex.js this part of the

route is a dynamic route parameter and

it could change depending on the post.

But then inside that folder we've got

another page file for the details page.

If we open the file, we should see

another simple component. And this time

it takes in the params prop

automatically passed into any page

component by next. And on that params

prop, we can access the slug like this.

And importantly, starting in next

version 15, I think this access is

asynchronous. So we have to make sure we

put a weight in front of this and also

make the component asynchronous because

of that. So then that slug is the

dynamic part of the URL after

forward/blog and now we're storing it in

this constant. Now later we'll be using

that slug to fetch that single post from

hygraph. But right now we're just

outputting the slug in the template. And

in this template we've got a section

ready for the post title right here, the

post author, the summary, and the

content itself. So we'll be rendering

that later once we have the content from

Higgraph. Anyway, down here we've also

got a little sidebar where later we'll

also be outputting links to more posts

by the same author as the post we're

currently viewing. For now, it's just an

empty sidebar. Now, one other page

component we have is the about page,

which is inside the about folder over

here. And if we open that one up, we see

it's a very basic component with no real

content yet. But again, we'll be

fetching that from high graph later. So

then the only other thing is this global

CSS file over here which contains a few

styles to make the site look a little

bit better. I'm not going to go through

it because this course has nothing to do

with CSS, but feel free to browse

through that if you want. Oh, and we

also have a header and a footer

component which is some basic layout

stuff and that's not really important in

the context of this series either.

Anyway, hopefully now all the

dependencies have installed and we can

run the dev server to view this project

in a browser and we can do that by

typing npm rundev and then hitting

enter. Once we've done that, it should

spin up a local dev server. So, we can

preview the app on localhost port 3000.

All right, so here it is. This is the

header up here with the site title and

we've got a link to the about page which

we'll see in a second. The homepage

content which is right here. Now, this

button is from the post lists component

where we have at the minute that empty

list of posts being passed in. So, we

don't see any posts yet. But if we click

on this, nothing happens. Then down

here, we've got the footer. Um, we can

go to forward slashabout if we wanted

to. That is the empty page. We can click

on this to go back to the homepage.

Also, if we go to forward/blog and then

forward slash something like ABC,

then we should see the blog details page

for that post. Again, not a real post at

the moment. But notice we're grabbing

that slug from the wrap parameter up

here and we're outputting it in the

template. And we have all these

different placeholders as well and the

sidebar. Okay, there we go. That is the

starter project then. All right then.

So, the last thing I want to do in this

lesson is set up a brand new project on

Higgraph. But before we do that, you'll

need to sign up for a free Hygraph

account, which you can do by coming to

the pricing page at high.com/pricing.

And then you can click on this sign up

for free button on the free hobby plan.

So this plan gives you some fairly

decent allowances, especially for

personal hobby projects. And for more

serious projects, you can always upgrade

to a paid plan. Anyway, when you click

on this button, you'll go through a

quick sign up process. And once you're

logged in, you should see a go to studio

button up here. If you click on that

button, you're going to get directed to

a dashboard of sorts where you can

manage all of your high projects. Now,

I've already got one created which I

used to test out the project that we'll

be making in this course. But right now,

I want to create a brand new one. So, to

do that, we can click on the add project

button. And from there, we can choose a

plan for this project, which I'm going

to set to be a hobby plan, the free

plan. We can also give the project a

name down here, and I'm going to call it

game zone. If you want, you can also

give the project a description, but I'm

going to skip that part. And then

further down here, we can select a

region to host the content from.

Finally, we can click on this button

down here to create the project. Once

you've done that, you should get

directed to the Higraph Studio for this

project. Now, on the right of this page,

we've got some documentation links and

guides. And then on the left, we've got

a bunch of links to set up schemas, uh

add content, upload assets, and do other

stuff as well. You've also got some

project settings down here where you can

do things like update the project name,

uh invite other users to the project,

access your project endpoints, clone

your project, and a bunch of other stuff

as well. For now, we're going to leave

it there and in the next lesson, we're

going to talk about Higraph models and

schemas. By the way, if you want early

access to the entire course now, you can

grab it on the netinja.dev website. So,

I will leave this link down below the

video. You can buy the course for $3 or

you can get access to my entire course

library by signing up for a Net Ninja

Pro membership which is just $9 a month.

For that, you get instant access to all

my YouTube courses, early access to

those courses as well, and access to

premium masterclass courses. You can get

your first month half price using this

promo code right here. So again, I'll

leave this link down below the video.