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.