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.

Single property page

Single property page - 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

Single property page

“

All right, guys. So now we want to do the single property display. We're already fetching the data. We have it in our property state. So it's going to end up looking like this. Now, right now, we're going to put everything in. But the stuff like on the side, the bookmark, share, contact form, that's just going to be hard-coded HTML for now. And then later, we'll break it up into separate components with separate functionality. The main image, I want to put into its own component called property header image. Then we'll have all the data here for the property. The map we'll do later. The images and light boxes, we'll do that later as well. So I just want the main info and the header right now. Now there is a lot of HTML to copy, So I may include in this video or in this section just the finished page.jsx file, just so if you guys don't want to copy all the HTML. But let's get started. I'm going to create a separate component for the property image header, like I said. Let's go back to…

Contents