Now that we're displaying
the list of posts in the HomePage
we have a simple but fully working blog.
Before adding more features,
let's have another look at
what happens when we build our app,
now that we have dynamic routes.
So I'll stop the dev server,
and launch "npm run build"
that, as we know, will generate
a production build for our website.
Let's have a look at the full output.
One thing to notice is that
our Home page is now an "SSG" page,
not simply a "Static" one
as it was the last time we did a build.
And that's because in the previous video
we added a "getStaticProps" function.
But the most interesting part is
our new dynamic route for the PostPage.
You can see that "posts/[slug]"
is also of the SSG type,
but it resulted in three separate pages
being generated, one for each post.
So Next.js generated 3 HTML pages,
named "first-post.html",
"second-post.html" and so on.
This dynamic route is "dynamic"
in the sense that multiple pages
are generated automatically,
but this still happens at build time,
so these pages are still static HTML (and JSON).
Now, let's look at the full build log,
from the beginning.
What we can tell from here is that
the "getStaticProps" function in our PostPage
was called three times,
each time with a different post slug.
So what happens is that Next.js
first calls the "getStaticPaths" function,
which we don't see here
just because we're not logging anything
in that function,
but if you remember "getStaticPaths"
returns three elements.
So for each path returned by "getStaticPaths"
Next.js calls the "getStaticProps" function
passing the "params" for that path,
which in our case contain the post slug.
And after each "getStaticProps"
Next.js should call the component render function.
We can see one render call here.
This one has the props for the "Second Post".
Next.js generates multiple pages in parallel,
so the order in which pages are generated
is unpredictable.
But if we scroll down,
at some point we should see
another call to PostPage render,
this one is for the "Third Post".
And below that there's also
the one for the "First Post".
So those are the three
post page components being rendered,
each time with different props.
If you look inside the build folder,
that is the ".next" directory in our project,
you'll see all the HTML and JSON files,
but we've seen that in previous videos,
so I won't show that again.
The important thing to know is that,
as I mentioned a minute ago,
a dynamic route still results in
static HTML files being generated.
At least as long as you set
"fallback" to "false" in "getStaticPaths".
So our entire website
is still completely static,
and can be deployed to any web server.