Original subtitles

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.