I will now give you a quick overview of Strapi,
that, as mentioned, is the Headless
CMS we'll use for our example.
Now, you can just watch this video,
without following the same steps on your machine,
because in the next lecture I'll give
you a project you can download,
so what I'm showing you now is just to
give you an idea of how Strapi works.
We can initialize a new project with
the "create-strapi-app" command.
So I'll open a Terminal,
and I'm inside my Projects folder.
Here I'll run "create-strapi-app",
but let me change the project name to "my-cms".
We want a "Quickstart" installation,
and it will take some time to download
all the dependencies.
It will also start the Strapi
application automatically,
and this opens a web page where
we can create a user.
But we'll do that later.
Let me stop the server for now,
and show you what's inside this project first,
by opening it in Visual Studio Code.
You can see that it's a JavaScript project,
with a "package.json" file.
It has some Strapi dependencies,
and it uses SQLite as the database
for local testing.
We don't actually need to look at the code,
but it is all JavaScript.
Now, we can start the dev server,
by going inside the project folder first,
and typing "npm run develop".
This will start the Strapi server
in development mode.
And it's asking us again to create a user.
So I'll just enter some sample details.
I'll put "admin@example.com" as the email,
and "Admin123" as the password,
that are the same credentials we'll
use for the rest of our example.
Now, this is just a welcome tour,
that we can skip.
But this is what the Strapi dashboard looks like.
From here we can configure our "Content Types",
which means the type of objects
we want to save into the CMS.
There's an existing type called User,
with fields like "username", "email", and so on,
but we're not actually going
to use it in our example.
Instead, we want to create a new collection type,
and we can enter "Review" as the "Display name",
because this object represents a game review
that we'll display on our Next.js website.
There are some "Advanced Settings",
and by default it has "Draft & publish" enabled,
which means that when we create a new Review
it will initially be a "Draft",
and then we can publish it as a separate step.
This could be useful to preview each
article before publishing it.
Anyway, let's continue.
The next step is to define some
fields for our collection type.
For example we could add a "Text" field,
for the "title" of each Review.
We're basically defining which properties
are available for a Review object.
Again, there are some "Advanced Settings",
and here we can set this field as "required",
which sounds like a good idea for the "title".
Then we can go ahead and add another field,
this time we could select "Rich text",
that will provide a "rich text editor
with formatting options".
This is perfect for the "body" of our Review.
And, once again, we could
make it required as well.
Ok, let's finish here.
We only have two fields, but
that's enough as an example.
What we want to do now is "Save"
our new collection type,
and Strapi will restart, after adding
some code for our new Review type.
At this point we can go to
the "Content Manager" tab,
and here we'll see all our reviews.
Of course we don't have any yet,
but we can go and create a new entry from here.
Let's enter a title, like "Stardew Valley",
and a body, with some example text.
Now, as you can see this editor provides
some simple formatting options,
so we can select some text
click the Bold button,
and this adds the right Markdown syntax.
We can then preview the result
with this other button.
So the person that writes the review doesn't
need to know the full Markdown syntax.
Anyway, let's go and save this entry.
Now, at this point this Review is a Draft version,
so we could have another person
check the text for example.
And then we can publish it as a separate step.
If we go back to the list, we can
see our new review in the table.
Let's go and quickly create another entry,
this time for "Hollow Knight",
and I'll just write "Test" as the body.
Let's save, and publish straight away,
and if we go back, of course we
see two reviews in the list.
So, as administrators we can define
some collection types,
and specify which fields are
available for each type,
and Strapi willÂ automatically
give us a user interface,
with a form with all the right field types,
so we or other staff members
can easily enter the data.
Not only that, but Strapi automatically
provides an API
that we can call from our frontend
application to fetch the data.
It's a REST API that we can use for
example to get all the entries.
Let's try opening this URL in the browser,
but our collection is called "reviews".
Now, at the moment we get a "Forbidden" error,
because we need to configure
some permissions first.
Under Settings we can configure the Roles,
under "Users & Permissions".
There's a predefined Role called "Public",
where we can specify which content
should be accessible to everybody.
Here we can select "Review",
and if we enable "find" and "findOne",
this means the public should be able to read the reviews,
but not modify them.
So, if we save these new permissions
and then go and request "/api/reviews" again,
you can see that this time we get some JSON data,
that contains two objects with
"title" and "body" properties,
along with some other fields
that are set automatically.
We'll look at the data format in more
detail later in this section,
but this is how we'll be able to fetch
the data in our Next.js application.
Our collaborators can manage all the review
data using the Strapi interface,
but we'll display it to the
public in our Next.js app,
with a fully customized user interface.
Now, I've only created two text fields here,
but there are other field types, like Media,
that we can use to upload images for example,
or "UID", that is a unique identifier,
and will be useful for the review "slug".
As mentioned, in the next video I'll give
you a preconfigured Strapi project
that already includes data for a number of reviews,
including images.