We've seen how to use the Next Image component
to benefit from all the image optimisation features
provided by Next.js,
such as images being resized
to match the dimensions we use in this page.
Now, it would be good to also show
a picture in the product page,
and in fact here we could display a larger image.
For that we'll need to change the ProductPage code,
that is this dynamic route file.
This actually would be a good exercise for you.
We basically want to insert
a Next Image component here,
let's say with "640x480" as the dimensions.
So this will show the image
between the title and the description.
But we could also make this page responsive,
because if the description takes
the full width of the page,
it's not that easy to read.
So let's say that on a large screen
we want to display the image on the left,
and the description on the right.
While on a small screen
we'll show the description below the picture.
One way to do this would be to use Flexbox,
and change the "flow-direction"
depending on the screen size.
So if you're up for the challenge
stop this video now,
and try to implement these changes on your own.
I'll wait a couple of seconds
before showing you my solution.
Ok, let's go and start
by adding the product picture.
We want to use the Next Image component.
Let me check that the editor
imported it from the right module.
Ok. The "src" will be the "product.pictureUrl".
We can leave the "alt" text empty,
since the title above already describes
which product we're looking at.
Now, let's set a "width"
that we said we want to be 640,
and a "height" of 480.
If we save,
we can see our picture.
Let's check how it looks on a large screen.
This is actually the full 640x480.
So it's interesting to notice how
the image will shrink automatically
if the screen is not wide enough
to display the full size.
This is the default behaviour
when using the Next Image component.
You can change it by setting a prop called "layout",
but the default works perfectly in this case.
Now, let's think about making the page responsive.
What I'll do is wrap both the Image
and the description in a container div.
This way we can style up the container,
and enable Flexbox.
The default "flow-direction" is "row",
so the elements inside our container
are now displayed one next to the other.
Which works all right on a large screen,
even though the image is too small.
But it looks awful on a small screen
because the image gets distorted.
So what I'm going to do is set "flex-1"
on the description,
which means the text should shrink or grow
depending on the space available.
This looks fine when the screen is large,
but when it's narrow for some reason
it's now stretching the image vertically.
I think that may be because
it's applying the Flexbox rules to the image,
overriding the styles set by the Next Image component.
If we wrap it in a container div
Hopefully that should fix the problem.
That looks better.
The image keeps its original aspect ratio.
Ok. Now, on a narrow screen
we want the elements inside this container
to be arranged in a column,
like that.
But of course this way
the same layout will apply to all screen sizes.
What we want is that, on a large screen,
it should use "flex-row".
So now on a small screen
the children are in a column.
But on a large screen they will be in a row.
That's good. The only thing is that
the description text is too close to the image.
Let's fix that by adding some margin on the left,
but only on large screens.
This is nicer. Large screen looks good,
small screen looks good.
I think we're almost there.
The final thing I want to do is
display the price, in addition to the description.
Let's turn this into another container div,
so then the "product.description"
can be in a paragraph inside it.
This way we can add another paragraph
with the "product.price".
And we can see the price here at the bottom.
Let's add some styles for those different paragraphs.
The description could be in small text.
While the price is more important
so let's make it larger,
and also in a bold font.
Maybe let's add some margin at the top as well.
Ok, I think this will do.
We have a decent responsive page
showing the product details.
Later on we'll want to add a button
to let the user buy this product.
But before we get there
we'll need to implement authentication,
because to add an item to the user's cart
we first need to know who this user is.
And we'll cover authentication in the next section.