From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

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

Creating global header component

Creating global header component - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Creating global header component

“

Now, the links we placed in the page.js should actually be inside the layout.js file, so that it can work as global links. So let me simply cut these links from page.js and paste them inside layout.js after the h3. And also import the link component. Now let's save this and check. So here when I click on various links, the components are getting loaded, but the links are constant as they are now a part of the global layout. Now instead of having links like this, we ideally should have a component to render the links section. And as it appears here as a header, let me create a header component for that. To create a component, I will create a file named header.js. But the bigger question is that, where should I create this file? I can certainly create the file here in the app folder directly where we have the page and layout.js files. But that is not a good choice. Instead, a better choice will be that I create a folder called components inside the app folder and that can contain…

Contents