Now, up to this point,
I explained a lot about pre-rendering
and how next.js does that.
But we haven't really seen it in action
other than on the running website in development mode.
But I do want to show you what exactly next.js
does do for you when you build the application.
Now, I did mention this build script before,
this build script, that's a script you execute
when you are ready to deploy your next application,
your next.js project and this build step here,
this next build command which has executed in the end
this will then pre-generate your pages.
And to show this to you, here I quit my development server
and I'll run npm run build here.
So I'll execute this build script
and therefore next build, in this project folder.
And what you'll see now is that
it's now creating that optimized production build.
And that can take a couple of seconds,
and after a while, this build process will complete.
Now we got a couple of pieces of information here.
We see that it was successful in the end
because we have no error here.
And we see that it generated two static pages here.
And we see the detailed output down there.
We also have a ledger here at the bottom
telling us that a filled dot
stands for static site generation.
So for a pre-generated page, that was pre-generated
during development or during the build process
because it uses get static props
a Lambda symbol would stand for us server side only page
something we're going to see later,
an empty dots stands for static.
So all's up page pre-generated
but a page that doesn't even need any data
and therefore doesn't use get static props
or anything like that.
And if I scroll back up again, we see that in the end
the two pages that were pre-generated,
is to starting page so slash nothing.
So in next.js and then a 404 page.
We haven't added one but you get one for free automatically.
We can ignore this underscore app thing here.
Now the 404 page has an empty dot
which means it was pre-generated without any data,
which makes sense, we didn't add our own one
and the default one is not fetching any data.
And index.js, so slash nothing was statically pre-generated
with help of get static props.
That's why we have that filled dot here.
That's how we can read this.
And we can also see this, if we have a look
at the .next folder, which was generated now
which holds this production ready code.
Which holds the output of the npm run build command.
Then in there we do have a server folder
into which we can dive.
And in there we see those pre-generated HTML files.
The two pre-generated HTML files and in index HTML,
if you open that, you also find that product data
in the end in there
because that's the pre-generated page,
which we also see if we would visit this page
in the browser.
And that's that pre-generated page,
which is sent back on the initial request
to the search engine crawler
or to the visitors off our page.
And we can even previewed this production ready page here
by running npm start, npm starts the production ready page
with a nodejs server,
and whilst we typically would do that
on some remote computer to expose it to the world,
we can also do that locally on our machine.
And then again, it starts on local host 3000
but this now is not the development server
but the real server serving the production ready page.
So if I visit local hosts 3000
if I entered this into browser, I still see this page
with the pre-rendered products,
because we just saw that in the pages folder,
in this .next folder
which holds is production ready site.
Side note, in the page source,
you'll also see there is some script tag injected by next.js
which in the end includes that data,
with which the data was populated.
That is needed for this hydration
where the pre-rendered HTML code is then connected
with the react application and that data
which was pre-fetched is handed off
to that react application
so that the react application
knows that this was dynamic data
and which kind of data should be rendered.
So that if you continued working with that data
and you would be updating that data through react.js
react would know which kind of data was received originally.
That's just a side note, it's all done automatically.
We don't need to do anything for that
but that is how next.js does work here
and how it pre renders pages for you.