We'll now begin the second phase
of our Next Reviews project,
where we'll evolve it from a Static Site
into a Full-Stack Application.
By doing that we'll learn the
remaining Next.js features
that are only available when running
our app in a Node.js server.
Let's imagine that, after launching our website,
over time it has become quite popular.
So we persuaded some of our friends
to help us with the game reviews.
And, to make it easier for our collaborators
to write new articles,
instead of Markdown files we
decided to use a "CMS",
that is a "Content Management System".
This is a separate application where
we'll store all the reviews,
and it includes a user interface for our
collaborators to edit each article,
including previewing the Markdown.
This CMS provides an API,
that we can call from our Next.js application
to fetch the data that we then
display on the pages.
This way we'll have lots of reviews
to show on our website.
It will also allow us to learn
how to fetch data from an API.
We'll also need to think about
how to update our pages if the
data in the CMS changes.
As we'll see, there are a few ways to do that,
from rendering the page dynamically every time,
to building static pages that
are automatically regenerated
whenever the data in the CMS changes.
We'll also cover Image Optimization.
Before we get started, I want to explain
why we'll use a Headless CMS for
the rest of this example.
So far we kept all the reviews
in local Markdown files,
and that approach works fine for a simple website,
but it doesn't scale very well.
For example if we want non-technical
people to write the reviews,
we cannot really expect them to edit
Markdown files in a code editor,
set all the right properties in the front matter,
and push the changes to a Git repository.
We'll need to give our collaborators
a nicer user interface,
and this also means our app needs to
be able to save and modify the data.
So instead of local files we could use a database,
and have our Next.js app read
and write data to that DB.
In addition to our existing pages
visible to the public,
we could then have an admin UI,
where staff members can add and edit the reviews.
That's one option.
A more sophisticated approach would be
to have a separate backend application.
This way all the database interactions
will be handled by the backend,
and our Next.js App only needs
to talk to the Backend API,
by making HTTP requests using "fetch" for example.
One reason we may want to do this is
if we have multiple front-end applications,
like separate mobile apps for Android and iOS.
They could all call the same
Backend to fetch the data.
Even if we only have a web application,
like in our case,
there'sÂ another possible advantage
to calling a separate API,
and that's that we don't have to
write the backend ourselves.
We can use an existing solution,
like a "Headless CMS",
that is a Content Management System that provides
both an API, that we can call
from our Next.js app,
and a user interface for administrators
to write and edit the data.
So, by using a ready-made solution like this,
our Next.js App only needs to serve
the public-facing pages.
It can stay mostly as it was at
the end of our last section,
except that we'll fetch data from the CMS API
rather than loading it from local files.
So that's why we'll use a Headless CMS.
The question at this point is:
which CMS should we choose?
There are literally dozens of Content
Management Systems available.
Some of them are open source projects,
others are cloud platforms,
and each one offers slightly different features.
For our example we'll use Strapi,
because it's open source,
and you can run it locally on your machine.
This will allow me to give you a
Strapi project you can download,
and already includes some review data and images,
so this will make it easy for you
to follow along with the example.
But, if you're choosing a CMS
for your own projects,
you may well have different requirements,
so you may want to do your own research
to see which CMS is the best
fit for your specific case.
Still, even though the details may differ
all Content Management Systems provide
the same basic functionality,
so Strapi will still be a useful example of
how to integrate a Next.js app with a CMS.