From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Unlock this course with a free trial

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

Header and footer components

Header and footer components - Next.js Tutorial

From the course: Next.js Ecommerce: Build a Shopping Platform from Scratch

Start my 1-month free trial Buy for my team

Header and footer components

“

So now we're going to create the header and the footer components, and the header will be changed and added to as the course goes on. The footer is very simple, so that's just kind of one and done. But what we're going to do is, in components, we're going to have a folder called shared. And a shared component is just a component that has other components inside of it. So let's create in that a new folder called header, and in that we'll create a new file called index.tsx, which is just the main header component. But then other things that we'll have in the header, such as the menu, the mode toggler, things like that, those will also go in this header folder. But index is the main component. So let's say SFC, if you're using the React simple snippets, and we'll call this header. And for now, I'm just going to put in the return, we'll just put the text header. I want to bring this in, and we're going to bring it into the root layout, not the main layout. The main layout is just the app…

Contents