A developer updates a Next.js application to display product images using the Next/Image component. The process involves modifying the product interface, configuring remote patterns in next.config.mjs to resolve domain errors, applying responsive Tailwind CSS styling, and using Material UI components to improve the layout and scroll behavior of the product listing.
Length 7:35
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #next.js #web development #coding #image optimization #typescript #tailwind css #material ui #frontend development #debugging #react
0:00 Okay, so next up we want the ability to actually 0:03 fetch these product images 0:04 from our Next.js server and display them on our UI here. 0:09 Let's head back into the UI and go into our products folder, 0:13 back into the product component here. 0:16 So firstly, let's update our product interface. 0:20 So our product interface lives inside the products folder, and we need to 0:24 update it with this new property that we're setting on the back end, 0:28 imageExists, which we know will be coming back from a 0:31 Boolean. 0:33 So now we can check to see if the image exists for this given 0:37 product. 0:38 Let's go ahead and underneath the product name, let's open 0:42 up a new JSX expression that will check to see if the 0:46 product.imageExists is true. If 0:50 it is, then and only then will we display this 0:53 Next.js/Image component. So go ahead 0:57 and use this image component from next/image. 1:00 Now, the Next.js image component extends the 1:04 HTML 1:04 image element with a bunch of additional features and 1:08 automatic optimizations to make it much faster, 1:12 including site optimization that's gonna automatically serve the 1:15 correct size image for each device. 1:19 It's going to provide visual stability to prevent layout shift automatically 1:23 when images are loading. It's going to use faster page loads by 1:26 only 1:27 loading this image when the user actually scrolls to it 1:30 and it's viewable in 1:31 the viewport, so we're gonna have faster load times. 1:34 And finally, we have asset flexibility for on-demand 1:37 resizing. 1:38 So we have all of these great features and optimizations out of the box simply by 1:42 just using this component, which is great. 1:45 So the first thing we wanna do is provide the source attribute, which of 1:49 course, is where the image is actually gonna be pulled from. 1:52 So we know this is gonna be our back-end server.
The rest of the transcript is for members.
Sign in 