So we added get static props
with some dummy code,
but at the moment we're really just,
not doing anything that would require
us to add that function.
We could just prepare dummy data like this
in the component function as well.
Well, of course I started with such a simple example to
just get started with get static props.
A more realistic example would be that we have a data file
like this dummy backend Json file
from which we wanna load data.
But we do wanna load the data when the page is prepared.
We don't wanna reach out
to that file through a HTTP request
or anything like that from the client site.
And therefore will now utilize the fact that any code inside
of get static props is executed on the server site so to say
with server site capabilities.
And that means that we can now, for example,
work with the file system.
For this I'll add import at the top
and I'll import Fs from Fs.
Now this imports the file system module from node JS.
This is not a third party package
which we needed to install.
It's one of the core node JS modules instead.
And working with the Fs module,
would fail if you try to do it on the client site,
because browser site Java script
can't access the file system.
And especially not our project file system here
because the entire project is not served to our visitors.
But we can import this year nonetheless
and use the file system module inside of get static prompts.
So we can use Fs here.
And next JS is very clever
and sees which imports you only use in get static props
or similar functions, which we'll learn about later.
And then those imports are basically stripped out
of the client site code bundle.
So when the code for the client site,
the react app code for the browser site,
when that is prepared, that import will not be part of it.
Next JS will ignore it for the client site,
it will split your code in a clever way.
So to component code in general will be part
of the client site code, this import and this code won't be.
And now we can use Fs to get access to this
dummy backend json file with the read file
or to read file sync function,
read file sync synchronously reads the file
and blocks the execution until it's done.
Read file on the other end wants a call back to continue.
And we can actually also import
the file system from Fs/promises,
which is a special version of this note JS module
that uses promises.
And when we do so read file actually returns a promise.
And since this is an async function
we can then just a wait this.
Now read file just needs a path
to the file which you wanna read.
So we can construct this path here and this path
or let's name it file path,
this path should lead to the dummy backend Json file.
Now to construct this path, we can import another module
from node JS the path module from path.
And that's a module with helpful
functionalities for building paths.
Now, here we can use path and execute to join method
to build a path that can be consumed by read file.
And here I wanna start from
inside the current directory and then basically work my way
to this data directory and the dummy backend Json files.
Now for this, we basically wanna dive into the data folder
and then grab this dummy backend Json file.
And to do this, we, first of all needs to tell path join
in which path we're starting
and we can get to current working directory
by using another node JS object or concept.
And that's the process object
which is globally available in node JS.
And then on process, we can execute the CWD method
which stands for current working directory.
And this gives you the current working directory
off this code file when it's executed.
Now, the important thing here is that this current
working directory will not be the pages folder.
Instead when this file is executed,
next JS will be executing it,
and it will basically treat all the files as if they sit
in our root project folder.
So the current working directory
will be the overall project folder
instead of the pages folder.
That's important to know.
So with that, we tell node JS
or the path joined methods to be precise,
that we start in this overall project directory.
Then we add a comma.
And the next argument is data
because we wanna dive into the data folder.
We wanna build a path which starts
at the current working directory.
So to project directory and then dives
into the data directory.
And then we add another argument.
We can add an infinite amount of arguments here,
which holds the file name we wanna use.
So in this case, dummybackend.Json
This now builds an absolute path to this file,
and that's now the path which we pass to read file.
So this will now read this file.
So with that, we get our Json data from that Json file
and now to get our actual data
we can call Json pars on the Json data.
Json is a globally available object just
as it is on the browser site
you can use it in node JS as well
and this (indistinct) Json data
it converts it into a regular JavaScript object.
And now that data will be an object with a product key,
which holds an array.
So now we can return our props,
which are now based on that data
and the products, which are part of my props
are now data.products.
So the products I fetched from this file are now passed
as a value to products here in this object
and our data for all ultimately passed (indistinct)
props to dis component function
when next JS executes disfunction for us.
But it will first of all, go through that function.
And hence, now if we save everything
and you reload local hosts free thousand,
you'll see free products here.
Again, if you viewed a page source,
you see that all the data is there right from the start.
Here it is,
so it was pre rendered
And was pre-rendered with help of get static props
which now executes a bunch of server site code
that never reaches the client.
It's only executed when next JS pre renders our page.