Now that we finally decided on
which approach to use to fetch the product data,
we can add some more features to our shop website.
At the moment we're displaying
a list of products here,
but we cannot actually click
on any of these products to see more details.
So let's go and add some links,
and we know that we need
the Next "Link" component for that.
Now, if we go to
where we're displaying the products,
inside each list item we can add a link.
and this will point to a product page,
that doesn't exist yet,
but we'll want to create a page
visible at "/products" and then the "product.id".
And then inside the "Link"
we want an anchor element
showing the "product.title".
Ok. If we save now,
there's no style associated with the links,
we'll change that later,
but we can still click on a link.
And this takes us to "/products/1",
except this page doesn't exist yet.
That's fine.
We know how to create that page.
We want to create a new folder inside "pages",
called "products".
And inside "products" we want a file
that is a dynamic route,
because this same page will be used
for every single product.
So if you remember the syntax for this
is to put the name of a path parameter
inside square brackets,
and I used "id" as the path parameter,
because that's what we use to identify each product.
This is the equivalent of the "slug" parameter
we used for each post in our Blog example.
Ok. From this point on
there is really no new concept
you need to be aware of
to implement this product page.
So I would encourage you to try
and write the code for this page on your own.
You'll need to fetch the product data
from the CMS.
And just as a reminder,
we can get the list of all products
from this endpoint,
but we can also request a specific product
by appending the product "id" to the path,
and this returns a JSON object
with the properties of this individual product.
So you can call this API endpoint
in the "getStaticProps" function
of the product page.
And for the purpose of this exercise
let's say we only want to display
the product "title" and "description" on this page.
Since it's a dynamic route you'll also need
to write a "getStaticPaths" function.
You can have a look back at our Blog example
if you don't remember how that works.
See if you manage to write this page by yourself,
and in any case I'll show you
my solution in the next video.