All language subtitles for 005 NextJS Pre-renders By Default__Downloadly.ir_en

Now to write some code.

I'm back here in an empty Next.js project,

which you again find attached to this lecture

so that we all start with exactly the same starting state.

It's very similar to the starting projects

from the last core sections,

but I did already add an index.js file

in the pages folder, which lists some dummy content.

Now if we run NPM installed here to install all dependencies

and then we run NPM run dev,

we bring up that development server again.

And once I do that,

we see product one, product two, product three,

and that's just the dummy content I have in there.

Now before we add this get static props function,

I already want to show you something important.

If we view the page source of this page here,

so of this page generated by Next.js,

then we see that it looks very different

than what we had a look at before

with the Standard React App.

And while this is a bit hard to read,

we see that in there, indeed,

we do have the unordered list with the list items here.

Here it is.

We do have that in here in this page.

And keep in mind that this page source we're seeing here

is the actual response we got back from the server,

in this case from the development server,

when this page was loaded.

When this request was initially sent.

And that is the kind of content

a search engine would see as well.

And that's of course great.

It already contains the content.

Of course, this is not content

that was fetched with use effect or anything like that,

but before in the React app, we didn't see any content,

not just the content that was fetched with use effect.

We also didn't see an empty unordered list.

We saw no content at all.

Now, we see all the HTML code,

all the JSX code, returned by our component.

We see that here.

And that already shows us that there is a difference.

This page, which we're getting here,

with Next.js was already pre-rendered by Next.js

without us doing anything.

It was already pre-rendered because by default,

Next.js pre-renders all pages that have no dynamic data.

And this page of course does not have any dynamic data,

everything here is just hard coded.

And if you have a page like this,

Next.js will automatically pre-render it for you.

Which is great because now any content

which you encode in your component

will be visible to search engines,

and to your website visitors, right from the start.

So that's not even the main thing of this section,

but it's already important.

However, let's now get back to get static props.