From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Component basics

Component basics - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Component basics

“

To display an image, you can certainly use the IMG tag, which is of HTML. But Next.js provides a better and efficient way to deal with images. There is an image component that you can use to display images. Do remember that generally we store the assets and images in public folder. Let's practically check it out. The first step we need to do is we import the component from the next slash image library. However, in the home page, it was imported in the boilerplate code as well. Now let's put an image by using the component. So I will say image. Now the next step is which image we want to configure, that is the SRC, the source. Here we have two choices. Either we give the path string or we statically import the image. Let me use the path string first. I'll say slash apples.jpg. Now notice how I have given only the image name and not the entire relative or absolute path. This is also a feature of the image component that it will automatically consider the path of the public folder, and…

Contents