At the end of the last video
I suggested an exercise for you,
that is to implement this new product page.
Now let's see together how to do that.
For a start we'll need
the usual React component for our page.
And it needs to be the "default" export.
As for the content rendered by the component
I'm going to copy the same structure
we have in our HomePage.
But we don't want a list of products.
Let's change the title to say "Product" for now.
And we'll also need to import
any component we use here,
that is "Head" and "Title".
Ok, if we save now
we should be able to click on a product
and see the new page.
Of course at the moment it will display
the same content for all the products.
To make it return different content
for different products
we'll need to write the "getStaticPaths"
and "getStaticProps" functions.
Starting with "getStaticPaths"
this returns an object with an array of "paths",
and a "fallback" flag, that for now
I'll set to "false" like in our Blog example.
Now, the "paths" array should contain
one element for each product,
but to do that we first need the list of products.
We know that we already have a function here
for exactly that purpose.
So in "getStaticPaths" we want to get the "products"
by awaiting the result of calling "getProducts".
And for some strange reason
auto-import isn't working for me,
so I'll have to import that function manually.
We need to go up two levels
and then into "lib" and "products".
Ok, once we have the "products"
we can create the "paths"
by mapping over the "products" array,
and transform each "product"
into an object that has a "params" property.
And the name of the parameter needs to match
what we used in the file name,
so it must be called "id",
and its value will be the "product.id".
Now, there's something we need to
be careful about here:
the "id" returned by the CMS is a number.
but the path parameter must be a string,
because it's passed as part of the URL.
So we need to convert the number to a string,
otherwise we'll get an error.
Ok, the next step is to write
a "getStaticProps" function,
so we can pass some props
to the React component
with the product data to be displayed.
"getStaticProps" returns
an object with some "props".
And what we want to pass in the "props"
is the "product" data.
So what we need now is
a way to fetch the data for a single product.
In our "lib" module at the moment
we only have a function to get all the products.
Let's add a new function to fetch
the data for a single product,
and in this case we need the "id" as an argument.
We can copy the "fetch" call from the other function.
But in this case we want a template string here,
so we can insert the "id" into the URL.
And rather than an array of "products"
this response contains a single product,
that's what we want to return from this function,
but I'm going to transform it using "stripProduct"
to keep only the fields we need.
Ok, now that we have this function
we can call it from "getStaticProps"
to get the "product" data.
And again, I'll have to import this manually
because it's not doing that automatically.
Not sure why sometimes it doesn't work,
but it doesn't matter.
Now, when calling "getProduct"
we need to pass the "id".
And we are in fact passing that
to this function from "getStaticPaths".
Here we receive the "path" object
that contains the "params",
where we can find the "id".
So that's what we pass to "getProduct".
And at this point "getStaticProps" should be ready.
The next step is to extract the "product"
from the "props" passed to the React component,
so that we can finally display
the product properties in the page,
starting with the "title".
And if we save now,
we'll need to reload the page
to execute the server-side code,
but we can now see "Aloe Vera".
And if we select a different product,
of course we'll see a different title.
Let's add the description as well.
but for that we'll need to change
the data tier code.
Let's add the "description" to
the product fields that we pass through.
We know that the CMS response does include
a "description" field.
So now we could add a simple paragraph
displaying the "product.description".
And if we try this out,
here we can see a long description for Aloe Vera.
And if we select another product,
of course we'll see a different description.
Ok, so this is the implementation
for our ProductPage.
It's a dynamic route, so we need
"getStaticPaths" to list all the URL paths
for the available products,
and "getStaticProps" to fetch the data
for an individual product.
Data that we pass in the "props"
to the component where it's displayed.