From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

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

Build the header

Build the header

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Build the header

“

So far, you have built the file structure of the Cambridge Rentals app. Now it is time to populate those files and build our app components. In this session, we will build the header of our website. As you can see, the header is made of three elements. A brand element on the left-hand side, a contact item in the middle displaying a phone number, a contact item on the right showing an e-mail address. Items include icons, which we will import from a React library called Lucide React. Let's install the Lucide React npm package. To get an icon, just go to this lucide.dev website, then search for it and see it in action. Now you can use this line to import the icon. And this is how you render the icon. Now let's go to app.jsx. As you can see, we had already imported the header component. Let's move to header.jsx. Now I'm adding the house icon from the Lucide React library. I imported the house icon and include it within a div inside the header. Now you will see that I've added a span…

Contents