All language subtitles for 001 Project Phase 2_en

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.