1
00:00:03,000 --> 00:00:06,075
We've seen how to use the Next Image component

2
00:00:06,075 --> 00:00:09,484
to benefit from all the image optimisation features

3
00:00:09,484 --> 00:00:10,821
provided by Next.js,

4
00:00:11,455 --> 00:00:13,377
such as images being resized

5
00:00:13,377 --> 00:00:16,399
to match the dimensions we use in this page.

6
00:00:16,968 --> 00:00:19,171
Now, it would be good to also show

7
00:00:19,171 --> 00:00:21,115
a picture in the product page,

8
00:00:21,115 --> 00:00:24,291
and in fact here we could display a larger image.

9
00:00:24,920 --> 00:00:28,127
For that we'll need to change the ProductPage code,

10
00:00:28,127 --> 00:00:30,140
that is this dynamic route file.

11
00:00:32,253 --> 00:00:34,561
This actually would be a good exercise for you.

12
00:00:35,061 --> 00:00:36,754
We basically want to insert

13
00:00:36,754 --> 00:00:38,510
a Next Image component here,

14
00:00:39,073 --> 00:00:42,968
let's say with "640x480" as the dimensions.

15
00:00:43,468 --> 00:00:44,944
So this will show the image

16
00:00:44,944 --> 00:00:47,023
between the title and the description.

17
00:00:47,578 --> 00:00:50,358
But we could also make this page responsive,

18
00:00:50,358 --> 00:00:52,381
because if the description takes

19
00:00:52,381 --> 00:00:54,087
the full width of the page,

20
00:00:54,087 --> 00:00:55,794
it's not that easy to read.

21
00:00:56,484 --> 00:00:58,718
So let's say that on a large screen

22
00:00:58,718 --> 00:01:01,334
we want to display the image on the left,

23
00:01:01,334 --> 00:01:03,441
and the description on the right.

24
00:01:04,069 --> 00:01:05,674
While on a small screen

25
00:01:07,034 --> 00:01:10,082
we'll show the description below the picture.

26
00:01:10,082 --> 00:01:12,994
One way to do this would be to use Flexbox,

27
00:01:12,994 --> 00:01:15,093
and change the "flow-direction"

28
00:01:15,093 --> 00:01:17,057
depending on the screen size.

29
00:01:17,760 --> 00:01:19,761
So if you're up for the challenge

30
00:01:19,761 --> 00:01:20,973
stop this video now,

31
00:01:20,973 --> 00:01:23,822
and try to implement these changes on your own.

32
00:01:24,443 --> 00:01:26,635
I'll wait a couple of seconds

33
00:01:26,635 --> 00:01:28,977
before showing you my solution.

34
00:01:29,552 --> 00:01:30,926
Ok, let's go and start

35
00:01:30,926 --> 00:01:32,800
by adding the product picture.

36
00:01:33,362 --> 00:01:35,735
We want to use the Next Image component.

37
00:01:36,562 --> 00:01:37,870
Let me check that the editor

38
00:01:37,870 --> 00:01:39,458
imported it from the right module.

39
00:01:40,128 --> 00:01:43,839
Ok. The "src" will be the "product.pictureUrl".

40
00:01:45,428 --> 00:01:47,508
We can leave the "alt" text empty,

41
00:01:47,508 --> 00:01:49,894
since the title above already describes

42
00:01:49,894 --> 00:01:51,790
which product we're looking at.

43
00:01:52,412 --> 00:01:53,873
Now, let's set a "width"

44
00:01:53,873 --> 00:01:55,761
that we said we want to be 640,

45
00:01:56,321 --> 00:01:57,926
and a "height" of 480.

46
00:02:01,121 --> 00:02:01,757
If we save,

47
00:02:02,821 --> 00:02:03,757
we can see our picture.

48
00:02:05,254 --> 00:02:08,515
Let's check how it looks on a large screen.

49
00:02:08,515 --> 00:02:11,095
This is actually the full 640x480.

50
00:02:11,670 --> 00:02:13,882
So it's interesting to notice how

51
00:02:13,882 --> 00:02:16,227
the image will shrink automatically

52
00:02:16,227 --> 00:02:18,372
if the screen is not wide enough

53
00:02:18,372 --> 00:02:20,047
to display the full size.

54
00:02:20,047 --> 00:02:21,990
This is the default behaviour

55
00:02:21,990 --> 00:02:24,402
when using the Next Image component.

56
00:02:25,237 --> 00:02:28,714
You can change it by setting a prop called "layout",

57
00:02:28,714 --> 00:02:31,722
but the default works perfectly in this case.

58
00:02:32,288 --> 00:02:35,296
Now, let's think about making the page responsive.

59
00:02:35,796 --> 00:02:38,167
What I'll do is wrap both the Image

60
00:02:38,167 --> 00:02:40,809
and the description in a container div.

61
00:02:43,229 --> 00:02:45,402
This way we can style up the container,

62
00:02:47,762 --> 00:02:49,300
and enable Flexbox.

63
00:02:49,800 --> 00:02:52,074
The default "flow-direction" is "row",

64
00:02:52,574 --> 00:02:54,848
so the elements inside our container

65
00:02:54,848 --> 00:02:57,374
are now displayed one next to the other.

66
00:02:57,374 --> 00:02:59,901
Which works all right on a large screen,

67
00:02:59,901 --> 00:03:02,111
even though the image is too small.

68
00:03:02,800 --> 00:03:05,173
But it looks awful on a small screen

69
00:03:05,173 --> 00:03:07,348
because the image gets distorted.

70
00:03:07,913 --> 00:03:10,609
So what I'm going to do is set "flex-1"

71
00:03:10,609 --> 00:03:11,922
on the description,

72
00:03:13,113 --> 00:03:15,755
which means the text should shrink or grow

73
00:03:15,755 --> 00:03:17,830
depending on the space available.

74
00:03:17,830 --> 00:03:20,409
This looks fine when the screen is large,

75
00:03:21,034 --> 00:03:23,194
but when it's narrow for some reason

76
00:03:23,194 --> 00:03:25,654
it's now stretching the image vertically.

77
00:03:26,214 --> 00:03:27,840
I think that may be because

78
00:03:27,840 --> 00:03:30,550
it's applying the Flexbox rules to the image,

79
00:03:31,110 --> 00:03:34,804
overriding the styles set by the Next Image component.

80
00:03:34,804 --> 00:03:36,992
If we wrap it in a container div

81
00:03:37,560 --> 00:03:39,611
Hopefully that should fix the problem.

82
00:03:39,611 --> 00:03:40,583
That looks better.

83
00:03:41,136 --> 00:03:43,844
The image keeps its original aspect ratio.

84
00:03:44,902 --> 00:03:46,799
Ok. Now, on a narrow screen

85
00:03:46,799 --> 00:03:49,749
we want the elements inside this container

86
00:03:50,319 --> 00:03:51,900
to be arranged in a column,

87
00:03:51,900 --> 00:03:52,485
like that.

88
00:03:53,219 --> 00:03:54,743
But of course this way

89
00:03:54,743 --> 00:03:57,997
the same layout will apply to all screen sizes.

90
00:03:58,566 --> 00:04:01,040
What we want is that, on a large screen,

91
00:04:02,266 --> 00:04:03,821
it should use "flex-row".

92
00:04:04,321 --> 00:04:05,837
So now on a small screen

93
00:04:05,837 --> 00:04:07,668
the children are in a column.

94
00:04:08,231 --> 00:04:11,121
But on a large screen they will be in a row.

95
00:04:11,121 --> 00:04:13,420
That's good. The only thing is that

96
00:04:13,420 --> 00:04:16,505
the description text is too close to the image.

97
00:04:17,137 --> 00:04:20,541
Let's fix that by adding some margin on the left,

98
00:04:20,541 --> 00:04:22,349
but only on large screens.

99
00:04:24,070 --> 00:04:26,657
This is nicer. Large screen looks good,

100
00:04:26,657 --> 00:04:28,249
small screen looks good.

101
00:04:28,815 --> 00:04:30,053
I think we're almost there.

102
00:04:30,553 --> 00:04:32,386
The final thing I want to do is

103
00:04:32,386 --> 00:04:35,341
display the price, in addition to the description.

104
00:04:35,900 --> 00:04:38,762
Let's turn this into another container div,

105
00:04:38,762 --> 00:04:40,957
so then the "product.description"

106
00:04:40,957 --> 00:04:43,086
can be in a paragraph inside it.

107
00:04:44,566 --> 00:04:46,746
This way we can add another paragraph

108
00:04:46,746 --> 00:04:48,219
with the "product.price".

109
00:04:50,132 --> 00:04:52,442
And we can see the price here at the bottom.

110
00:04:52,942 --> 00:04:56,504
Let's add some styles for those different paragraphs.

111
00:04:56,504 --> 00:04:59,125
The description could be in small text.

112
00:04:59,692 --> 00:05:01,632
While the price is more important

113
00:05:01,632 --> 00:05:03,043
so let's make it larger,

114
00:05:05,225 --> 00:05:06,830
and also in a bold font.

115
00:05:07,591 --> 00:05:10,065
Maybe let's add some margin at the top as well.

116
00:05:11,091 --> 00:05:12,863
Ok, I think this will do.

117
00:05:14,024 --> 00:05:16,339
We have a decent responsive page

118
00:05:16,339 --> 00:05:18,364
showing the product details.

119
00:05:18,936 --> 00:05:21,344
Later on we'll want to add a button

120
00:05:21,344 --> 00:05:23,614
to let the user buy this product.

121
00:05:24,182 --> 00:05:25,538
But before we get there

122
00:05:25,538 --> 00:05:27,836
we'll need to implement authentication,

123
00:05:28,394 --> 00:05:31,351
because to add an item to the user's cart

124
00:05:31,351 --> 00:05:34,164
we first need to know who this user is.

125
00:05:34,164 --> 00:05:37,841
And we'll cover authentication in the next section.