In this project, which we have here,
we currently only have one page, the index.js page.
Now there we're rendering some dummy product data
and it's very simple dummy product data, of course.
Now what if our data there was a bit more complex?
So every product also had a description, let's say.
And I'll keep this very simple here
since I want to focus on the Next.js features,
not on this concrete example.
So here, the description is this is product one.
It's one extra JSON key added here.
And on the second product, it's this is product two.
And you might be able to imagine
what it will be on the third product.
Yes, this is product three.
Now the idea could be that on the index.js file
we render a list of products,
and every product is a clickable link,
which takes us to a detail page
where we then also see the description of the product.
So similar to what we built before
in our project with the events,
we have a detail page for the products.
And for this, we can of course, add a new page
with a dynamic segment between square brackets.
And here we could name this PID, for product ID,
but that identifier is up to you, dot js.
So that's now a dynamic page.
Alternatively, we create a folder named PID like this,
and in there we then have an index.js file,
but I'll stick to this setup.
And here we could now add a component function,
which is the product detail page, let's say.
And the idea is, that in this component on this page,
we show the product details.
So to keep this simple, I just want to return,
let's say a fragment here, imported from React.
And there I then have an H1 tag
with the title of the product,
and below that, a paragraph with the description.
But that data should now be fetched
from the dummy backend JSON file as well.
Now again, of course, we could write
standard React code here, so to say,
and use useEffect imported from React
to send a HTTP request to some server
which might provide this product data.
But then we're back in the world where
that data is not there when this page is initially rendered.
So search engines still wouldn't see it,
so that's not what we'll do here.
Instead, what we will do here
is we will again use
this async prop function.
So we'll export this async function getStaticProps.
This function is again a function we can use here,
and here we then, again,
want to reach out to the backend JSON file,
but now instead of reading
the entire file and returning all products,
I want to read the file and only return
one product from that file.
That will be the difference.
And therefore of course we need to know
which product should be returned here.
And of course, that's something we can determine
by looking at the concrete value, which is in the URL.
So to concrete value for this PID key here.
That's where does context parameter again
becomes important because I did briefly mention before
that we can use this context parameter,
which is exposed to us buying Next.js,
to get hold of the concrete param values.
So the concrete values for these dynamic segments
in our paths.
We do get access to that by having a look
at the params key in context.
Now that's not a name I came up with,
instead, that is one of the properties
exposed by this context object
which is given to you by Next.js.
And params is an object full of key value pairs
where the keys are the identifiers
for the dynamic path segments.
So in this case, PID,
which is the only dynamic parameter of this page here
and the values are the concrete values
that were entered in the URL.
So here I then get my product ID
by accessing params.pid.
PID because that's what I picked here on the file name.
Now, one quick note about extracting the params here
to avoid confusion.
Of course, you can also extract params
through the use router hook
inside of the component function.
That's what we did before in this course.
We got access to that router object
with the useRouter hook,
and we extracted params with router.query.
Now there is a difference between extracting params
in the component function and the getStaticProps.
When we extract these params in the component function,
we can use them inside of the component,
for example to use that extracted ID
to send a request to some backend server
to fetch data from there,
but that would then only happen in the browser.
If you want to pre-render a page
with help of getStaticProps,
which we use to prepare the data
for pre-rendering the page,
then this happens on the server.
And as I explained, getStaticProps runs before
the component function runs.
It needs to run before that
because the component function
is then executed to pre-render the page.
So if you plan on preparing a page on the server
or during the build process with getStaticProps,
then you need to get access to the params,
so to that dynamic path segment
inside of getStaticProps
so that you can use the param data here
to prepare the data for the component.
Then we don't need to extract that dynamic segment
in the component function
unless we also need it there for some reason.
But for preparing the data,
we then want to do that in getStaticProps.
And now with that, we could reach out
to our file, to the dummy backend JSON file,
and try to read that product with that ID.
So for this I'll briefly copy that code from index.js,
where I get access to this dummy backend JSON file,
and I'll therefore also grab those imports here
and add them to pid.js
like this.
And now that we got hold of this file,
I just want to filter my data,
the products in there, to be precise
for a product with this ID.
So here I'll then get my product
by reaching out to data.products
and calling find there,
and then we pass a function to find
which is executed on every product in that array.
And we want to return true here
if the ID of the product
we're currently looking at in that array
is equal to the product ID
we got here from our parameters.
And if that is equal, we know that's the product
we need for this component.
So then here, at the end of getStaticProps,
we return an object with the props key,
and here I then set my loaded product, let's say,
equal to the product fetched here.
Now there is a load of product props available,
inside of the product detail page.
So here we can extract this,
maybe again with object de-structuring,
we can get this from the props,
which we should accept therefore,
and then it's this loaded product
from which we can read the title and the description.
So here it's then loadedProduct.description.
Now, in order to test this,
we need to make sure we can go to this detail page.
And then from the index.js file,
I will wrap the text ends of the list item
with the link component,
which, of course, needs to be imported again
from next/link, so that still needs to be imported.
Then I move the product title between those link tags,
and then href is set to a dynamic value,
which I construct with a template literal,
where I want to go to slash
and then inject the product ID here.
And then with that, if we now save all,
we've got clickable links here,
and if I click on a link,
I get an error.
getStaticPaths is required.
Now that is an expected error,
and it's an important one.
So let's understand what it does,
but before we do that,
in the next lecture, I again want to emphasize
that the code here is generally correct.
We use params to get access to the concrete values
encoded in the URL,
and we can then use that extracted data
to fetch a specific piece of data
and expose this to the component.
So this is not wrong,
and still we have this problem.
So let's understand where this is coming from.