After rewriting "getSlugs",
all these functions are now fetching
the data from the CMS.
Note how we only had to change
the code in this file.
We didn't modify anything in the page components,
other some temporary log statements
here and there.
But the way we display the
data is exactly the same.
We only changed how we load the data:
by sending HTTP requests to Strapi,
rather than reading Markdown files.
By the way, we can delete this
"content" folder now.
The fact that we could migrate
from local files to a CMS
without modifying any of the pages
shows why it's a good practice
to keep the data fetching logic
separate from the components.
Anyway, what I'd like to do now is
run our app in production mode,
and see how that works, with the data in a CMS.
Note that Next.js is still configured
to do a Static Export.
In the Terminal, we already did a production
build in the previous video,
but let's do another "npm run build".
All our pages are statically generated,
including the dynamic route,
so we can still do a Static Export of our website,
even though we keep the data in the CMS.
All the review data will be
fetched during the build.
We can test the static website locally
by running the "serve" command
with "out", that's the folder
containing the static export.
Let's go and reload the application
in the browser,
making sure it doesn't use the cache.
You can see that everything still works,
even as a fully static website.
All the content for each review
has been incorporated into the HTML
for each page during the build.
So, when running the static website
we don't actually need access to the Strapi API.
All the data has already been
fetched at build time.
There is one caveat though: if we inspect an image
we'll see that the browser loads
it directly from the CMS.
The URL is "localhost" on port 1337,
that, as we know, is the Strapi address.
So, if we wanted to actually deploy
this website to production,
we'll first need a Strapi
server with a public URL,
and use that public address for
all the images in our pages.
In the next section we'll talk
about Image Optimization,
and see how we can get Next.js
to automatically convert and resize our images.