Serve Optimized Images Using the Next.js Image Component
The image component from Next.js comes with excellent performance optimizations that make it worth using. It comes with improved performance, better visual stability, faster page loads, and more!
In this lesson you’ll learn how to use this component to serve both local and remote images in your Next.js app.
Instructor: [0:00] In the previous lesson, we learned how to serve static assets in the public folder. We had an image lazar.png, and we rendered it on the page. We can always use the good old image tag to display images.
[0:12] Next.js also provides us an image component that has some built-in performance optimizations, for example, improved performance. It will always serve the correctly-sized images for each device using modern image formats. It also guarantees visual stability by preventing cumulative layout shifts automatically.
[0:31] Faster page loads, images are only loaded when they enter the viewport with optional blur-up placeholders. As a flexibility, you get on-demand image resizing, even for images stored on remote servers.
[0:46] Let's open exercise five, and check out the index page. The index page is very similar to the last exercise, but in this case, we're going to use the image component. Let's import the image component.
[0:59] We'll do import image from next/image. When we use the image component, we don't need to put the files in the public folder. In this case, we can import lazar directly from the root. Now, we can go down to the home component and return the image component.
[1:22] We'll set the source to lazar, and we'll also set the out prop. Also, let's run npm run dev, and see what we get. There we go, there's the image. Using the image component, we can also render remote images. Let's say, we have a Twitter image that we need to render.
[1:45] Let's wrap the home component in an empty React fragment and add another image where the source is going to be the Twitter image URL. Also, let's add an out prop remote picture of lazar. In this case, we can also add a width of 250 pixels and a height of 250 pixels.
[2:21] Let's see what we get. We get an error. It says, "Invalid source prop." The hostname pbs.twimg.com is not configured under images in your next.config.js file. We don't have that file. To fix this error, let's go ahead and create it.
[2:41] In the root folder, we're going to create the next.config.js file. We need to type module.exports, provide the images property and provide the domains array. In here, we need to register the pbs.twitterimage.com. We're just going to paste it here, and restart our server.
[3:09] If we go back and refresh, we can see the remote image being rendered. Let's go and change the width and height to 550, just so you can see it change. There we go.
[3:25] Let's recap, Next.js also provides us with an image component that has some built-in performance optimizations. We can use it to render local images and remote images.
[3:35] In order to render remote images, we need to create the next.config.js file at the root of the project, and register the domain of the image in the images and domains property. That's how we can render highly optimized images in Next.js.