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.

Homepage components

Homepage components - 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

Homepage components

“

So now we're going to start to work on some of the homepage components. And I'm just going to bring over the theme just to kind of show you what we'll be doing. So I want to add this, the hero. Now, the search functionality we won't be doing till much later, but we'll just at least get it shown on the page. So we'll do the hero, and then these two info boxes I want to do. So basically, we'll have an info boxes component, which will be the grid that holds both of these. And then each one of these will be its own info box component that will be reusable and will take in certain properties like the background color, the text, the text color, the button info, things like that. And then finally, we'll do the footer as well, which is pretty simple, just has the logo. So those are the three things that I want to get done in this video. All right. So let's start with the hero. And you're going to have to use your theme files because we're going to grab the HTML from the HTML files. But let's…

Contents