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.

Home property listings

Home property listings - 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

Home property listings

“

So now we're going to do the properties on the home page. I want three randomized properties. So one thing I forgot to do that I just fixed is in the property card component, I had a bunch of classes that I forgot to set to class name. So just make sure you go through. Just open up your console. And if you see any warnings saying class needs to be class name, just make sure you fix that. All right, so if we open up our home page, which is app, and then page.jsx. We could bring in our JSON file here, loop through them, display them, but I don't really want to put all that in the home page. I'd like to put that in a separate component. So let's create another component in the Components folder called HomeProperties.jsx. That way, we can keep our home page kind of clean. And then in here, we'll do RAFCE. And then I guess let's just save it and import it into our home page. So Home Properties. We'll put that right under Info Boxes. So we should see this, Home Properties. And then in here,…

Contents