1
00:00:03,000 --> 00:00:04,982
Now that we finally decided on

2
00:00:04,982 --> 00:00:08,153
which approach to use to fetch the product data,

3
00:00:08,153 --> 00:00:11,456
we can add some more features to our shop website.

4
00:00:12,089 --> 00:00:13,675
At the moment we're displaying

5
00:00:13,675 --> 00:00:14,945
a list of products here,

6
00:00:15,498 --> 00:00:17,117
but we cannot actually click

7
00:00:17,117 --> 00:00:19,719
on any of these products to see more details.

8
00:00:20,277 --> 00:00:22,255
So let's go and add some links,

9
00:00:22,255 --> 00:00:23,788
and we know that we need

10
00:00:23,788 --> 00:00:26,022
the Next "Link" component for that.

11
00:00:26,650 --> 00:00:27,497
Now, if we go to

12
00:00:27,497 --> 00:00:29,405
where we're displaying the products,

13
00:00:30,750 --> 00:00:33,459
inside each list item we can add a link.

14
00:00:33,959 --> 00:00:36,427
and this will point to a product page,

15
00:00:36,427 --> 00:00:37,922
that doesn't exist yet,

16
00:00:38,487 --> 00:00:40,642
but we'll want to create a page

17
00:00:40,642 --> 00:00:44,049
visible at "/products" and then the "product.id".

18
00:00:44,618 --> 00:00:46,174
And then inside the "Link"

19
00:00:46,174 --> 00:00:47,670
we want an anchor element

20
00:00:47,670 --> 00:00:49,346
showing the "product.title".

21
00:00:50,884 --> 00:00:52,189
Ok. If we save now,

22
00:00:53,417 --> 00:00:55,764
there's no style associated with the links,

23
00:00:55,764 --> 00:00:57,074
we'll change that later,

24
00:00:57,628 --> 00:00:58,900
but we can still click on a link.

25
00:01:00,829 --> 00:01:03,292
And this takes us to "/products/1",

26
00:01:03,292 --> 00:01:05,755
except this page doesn't exist yet.

27
00:01:06,325 --> 00:01:06,967
That's fine.

28
00:01:06,967 --> 00:01:08,679
We know how to create that page.

29
00:01:10,691 --> 00:01:13,459
We want to create a new folder inside "pages",

30
00:01:13,459 --> 00:01:14,542
called "products".

31
00:01:15,424 --> 00:01:17,753
And inside "products" we want a file

32
00:01:17,753 --> 00:01:19,305
that is a dynamic route,

33
00:01:19,305 --> 00:01:21,568
because this same page will be used

34
00:01:21,568 --> 00:01:23,185
for every single product.

35
00:01:23,878 --> 00:01:26,593
So if you remember the syntax for this

36
00:01:26,593 --> 00:01:29,308
is to put the name of a path parameter

37
00:01:29,308 --> 00:01:30,951
inside square brackets,

38
00:01:30,951 --> 00:01:33,666
and I used "id" as the path parameter,

39
00:01:33,666 --> 00:01:37,381
because that's what we use to identify each product.

40
00:01:37,381 --> 00:01:40,667
This is the equivalent of the "slug" parameter

41
00:01:40,667 --> 00:01:43,668
we used for each post in our Blog example.

42
00:01:44,596 --> 00:01:46,114
Ok. From this point on

43
00:01:46,114 --> 00:01:48,184
there is really no new concept

44
00:01:48,184 --> 00:01:49,770
you need to be aware of

45
00:01:49,770 --> 00:01:51,909
to implement this product page.

46
00:01:51,909 --> 00:01:54,047
So I would encourage you to try

47
00:01:54,047 --> 00:01:57,152
and write the code for this page on your own.

48
00:01:57,996 --> 00:02:00,179
You'll need to fetch the product data

49
00:02:00,179 --> 00:02:00,946
from the CMS.

50
00:02:01,862 --> 00:02:03,220
And just as a reminder,

51
00:02:03,220 --> 00:02:05,286
we can get the list of all products

52
00:02:05,286 --> 00:02:06,407
from this endpoint,

53
00:02:07,025 --> 00:02:09,876
but we can also request a specific product

54
00:02:09,876 --> 00:02:12,727
by appending the product "id" to the path,

55
00:02:13,294 --> 00:02:15,062
and this returns a JSON object

56
00:02:15,062 --> 00:02:17,832
with the properties of this individual product.

57
00:02:18,390 --> 00:02:20,733
So you can call this API endpoint

58
00:02:20,733 --> 00:02:23,004
in the "getStaticProps" function

59
00:02:23,004 --> 00:02:24,423
of the product page.

60
00:02:24,423 --> 00:02:26,979
And for the purpose of this exercise

61
00:02:26,979 --> 00:02:29,321
let's say we only want to display

62
00:02:29,321 --> 00:02:32,941
the product "title" and "description" on this page.

63
00:02:33,795 --> 00:02:36,440
Since it's a dynamic route you'll also need

64
00:02:36,440 --> 00:02:38,715
to write a "getStaticPaths" function.

65
00:02:38,715 --> 00:02:41,420
You can have a look back at our Blog example

66
00:02:41,420 --> 00:02:43,696
if you don't remember how that works.

67
00:02:43,696 --> 00:02:46,709
See if you manage to write this page by yourself,

68
00:02:46,709 --> 00:02:48,492
and in any case I'll show you

69
00:02:48,492 --> 00:02:50,337
my solution in the next video.