All language subtitles for 006 Adding _getStaticProps_ To Pages_Downloadly.ir_en

The get Static props function

can be added to any page file

and only there as I mentioned,

and you need to export it.

And when you do so,

then next JS will also call this get static props

function on your behalf when it pre generate a page.

And the disfunction also signals to next JS

that this is a page that should be pre generated.

Now I just said that that next JS would pre render

any page by default and that's true,

but we'll later learn about a way of telling next JS

to not pre render a page

and the offer it's important to understand that

that get static props will not tell next JS

to not pre render,

but instead it of kind of a confirms to next to JS that

this page still should be pre-generated.

But in addition to just running through the component

and returning the JS x code,

next JS will then also call this,

get static prompts function.

If it finds one in your component file.

So therefor here let's say we want to load this product

data dynamically but not in the way we would do it

in a standard react app with user fact

what showed you before.

And therefor attached you find another file

the dummy backend Jason file with is just example,

dummy file are used.

In the react example a second ago and you should add

that in your main project folder not in public,

not in pages just in your folder like this.

or actually

maybe at a data folder oops a folder not a file

add a data folder and move that file into there

so that you have a data folder.

And in that data folder you have to dummy back and Jason

File.

And now We want to load data from that file

for this index JS file.

But we don't want to load it through an HTDP request.

That's only sent from the client site after the page

was loaded.

Instead we wanna prefetch the data before

we create this component.

And before this component page gets pre rendered by next JS.

And that's exactly why we then add this function

which we export the async function called get static props.

And again it needs to be called exactly like this.

Now in this function you then always needs to

return an object.

An object that has a props key because

the function is named gets static props.

And actually what this function does is it

prepares the props for your component.

So this props object It prepares that,

because next JS if you have i get static props

function in your file we'll first execute this function.

And then in a second step execute the component function.

Now in a second step because that first step

prepares the props for this component function,

and therefor in this get static props function.

You can run any code you want.

Again code that will never

be visible on the client site that fetches data,

and exposes data through props to this homepage component.

So here it could set props equal to an object so

that the props I get here are still an object,

where i have my products.

And that could be an array where i

for example have one object

in that array with an idea of P one and a title

P of product one something like this.

So now et study props returns an object with a props

key that's always required.

You always must return an object with a props key

and then the data and the props keys up to you

but it should be an object.

And here it's an object with a product key

Which holds an array.

An array of product objects.

And now We'll receive that here on props on this homepage

because next JS first calls this get static props function,

and then executes this component function.

And it does both things in advance.

So non of that code here runs on the client side,

instead that all happens during built time

or in development as part of this development server,

which we're using.

So here on their homepage component.

We can then expect that we do get a product key

On our props.

So I can use object de-structuring to pull products

out of props.

And I use Products here because that's the key I

Used to down there.

And then we can render this list dynamically.

By accessing products and mapping that,

such that every product is mapped into a list item,

Where the key is the product ID.

So this ID we got down there

and as a value between the opening and closing lists

item tags i output the title like this.

And with this In place

if we now visit our next JS application ,

we see product one here.

Now of course we're not fetching that data from any file,

i have it hard coded in there

but we already implemented get static props with that.

And if we now again,

view the page source off this page we see

that this data this product one data is part

of the page that was sent to the client.

So fetching that product data did not happen on the client,

It happened on the server.

And if we would dive into the sources tab of the dev tools

and look through the JavaScript code files,

you wouldn't find that code anywhere in those files.

because it's not

part of the code that's shipped to the client side.

And that means that the code

in get static props can do server side things

because it's not executed on the client side,

So you can use credentials which your users shouldn't see

and you can also run code that wouldn't work

in the browser.

Code that accesses the file system for example,

and that's exactly what we're going to do next.