From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Unlock this course with a free trial

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

Property card dynamic data

Property card dynamic data - Next.js Tutorial

From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB

Start my 1-month free trial Buy for my team

Property card dynamic data

“

All right, in the last video, we went ahead and we used the properties.json file, and we pulled it into our property page or properties page. And then we passed it into the property card component, which right now is just rendering just hard-coded HTML. So we want to make this dynamic. So let's start off by taking in our prop with the property. And then we're going to be using the image component. So let's bring that in from next image. And let's bring in the link component as well. So link, next link. And we'll just kind of start from top to bottom. So we have this IMG tag, which is working right now because these images, if we just say source images, it looks in the public folder, which we do have images, properties, And then we have the A1.jpg. So I'm going to change this to the image component. And when you use the image component, we actually have to do slash. And then that will pertain to the public directory. But you can see it says missing width property. So it's a little…

Contents